使用querySelector可以根据两个条件进行选择，其中一个条件是前缀

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-']`);

回溯标记("模板文字"(允许在字符串中更简单地包含表达式。