使用querySelector根据两个条件获得select，一个是前缀

Question

因此，我试图选择一个div基于两个条件，一个是前缀。

所以如果我有

<div class="bob delay-10"></div>
<div class="joe delay-20"></div>

我想要

function getdelay (classname) {
    let delayselect = document.querySelector("*[class='"+classname+"'], *[class*='delay-']");
return delayselect;
}
getdelay("joe");

应该返回<div class="joe delay-20"></div>

目前它的工作方式是选择OR而不是AND。

我怎么才能解决这个问题？

Answer 1

对固定类名部分使用实际的类选择器(.)。

let delayselect = document.querySelector(`.${classname}[class*='delay-']`);

backticks (“模板文本”)允许在字符串中更简单地包含表达式。