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

Question

So I am trying to select a div based on two conditions, one being a prefix.

So if I have

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

I want to have

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

should return <div class="joe delay-20"></div>

Currently the way it is working is it is selecting OR not AND .

How can I fix this?

Answer 1

Use an actual class selector ( . ) for the fixed class name part.

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

The backticks ("template literals") allow for simpler inclusion of expressions in strings.