使用 querySelector 根據兩個條件得到 select，一個是前綴

Question

所以我試圖 select 一個 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 not AND 。

我怎樣才能解決這個問題？

Answer 1

對於固定的 class 名稱部分，使用實際的 class 選擇器 ( . )。

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

反引號（“模板文字”）允許更簡單地在字符串中包含表達式。