如何使用行数较少的jQuery id

Question

我用24个ids:搜索以缩小这种类型的jQuery内容的大小

if (currValue >= 3) /* These are my 24 ids */
{
document.getElementById("skillbutton1").disabled  = true;
document.getElementById("skillbutton2").disabled  = true;
document.getElementById("skillbutton3").disabled  = true;
document.getElementById("skillbutton4").disabled  = true;
document.getElementById("skillbutton5").disabled  = true;
document.getElementById("skillbutton6").disabled  = true;
document.getElementById("skillbutton7").disabled  = true;
document.getElementById("skillbutton8").disabled  = true;
document.getElementById("skillbutton9").disabled  = true;
document.getElementById("skillbutton10").disabled = true;
document.getElementById("skillbutton11").disabled = true;
document.getElementById("skillbutton12").disabled = true;
document.getElementById("skillbutton13").disabled = true;
document.getElementById("skillbutton14").disabled = true;
document.getElementById("skillbutton15").disabled = true;
document.getElementById("skillbutton15").disabled = true;
document.getElementById("skillbutton16").disabled = true;
document.getElementById("skillbutton17").disabled = true;
document.getElementById("skillbutton18").disabled = true;
document.getElementById("skillbutton19").disabled = true;
document.getElementById("skillbutton20").disabled = true;
document.getElementById("skillbutton21").disabled = true;
document.getElementById("skillbutton22").disabled = true;
document.getElementById("skillbutton23").disabled = true;
document.getElementById("skillbutton24").disabled = true;
}

Answer 1

将相同的类放在这些元素中的每一个上，并在它们之间循环：

document.querySelectorAll('.skillbutton').forEach(el => el.disabled = true);

或者jQuery中的相同内容：

$('.skillbutton').prop('disabled', true);

Answer 2

要获得所有以"skillbutton"开头的元素，您应该使用：

$("[id^=skillbutton]")

以"skillbutton"结束

$("[id$=skillbutton]")

或者使用一个常见的类，正如一条评论所提到的：

<button id="skillbutton1" class="skillBtn">Btn</button>
$(".skillBtn")

有关上下文，请参阅此相关问题