将HTML CSS中的多个ID关联到Script/Javascript

Question

来自SO线程ID在整个页面中必须是唯一的吗？html和javascript中是否允许多个id？线程，我知道虽然HTML/CSS可能不允许相同的ID链接到网页上的Javascript/Script。

然而，我正在寻找一个高效的&比简单地复制大型Javascript并为每个id添加一个渐进数字更简单的解决方案。

我有一个带有微调器的提交按钮：

<button class="submit-button" id="SubmitButton">
<div class="spinner hidden" id="spinner"></div>
<span id="buttonText">Submit Now</span>
</button>

并链接到LARGE_SIZED脚本，如下所示：

<script>
const myConst = MyNUM('<?php echo SOME_DETAILS; ?>');
// Select submit button
const subBtn = document.querySelector("#SubmitButton");
// Submit request handler
.......
.......
.......
// Several hundred lines of script code, 
// including functions and other processing logic for spinners and whatnot
.......
.......
</script>

我需要在同一个网页上有多个这样的SubmitButton，所以一种方法是在id后面加一个递增的数字(比如id="SubmitButton1", id="SubmitButton2"等等(

并为每个按钮id复制粘贴相同的CCD_ 2部分。

然而，这将使网页变得非常庞大和冗长。

有没有什么方法可以使用最少的代码而不重复整个块，同时实现所需的(多个提交按钮(？

Answer 1

您真的应该委派。如果使用类名导航目标的DOM，那么就不需要ID

document.addEventListener("click", function(e) {
const tgt = e.target.closest("button");
if (tgt.matches(".submit-button")) {
const spinner = tgt.querySelector("div.spinner");
tgt.querySelector("span.buttonText").hidden = true;
spinner.hidden = false;
console.log(spinner.textContent)
}
})

<button class="submit-button">
<div class="spinner" hidden>Spinner 1</div>
<span class="buttonText">Submit Now</span>
</button>
<button class="submit-button">
<div class="spinner" hidden>Spinner 2</div>
<span class="buttonText">Submit Now</span>
</button>
<button class="submit-button">
<div class="spinner" hidden>Spinner 3</div>
<span class="buttonText">Submit Now</span>
</button>

Answer 2

也许这会有所帮助。

// Get all elements with the same class in an array
const submitButtons = document.getElementsByClassName("submit-button") // or document.querySelectorAll(".submit-button");
// Loop through the array
for (let i = 0; i < submitButtons.length; i++) {
// Get each individual element including the element's children
const submitButton = submitButtons[i]
const spinner = submitButton.querySelector(".spinner");
const submitText = submitButton.querySelector(".buttonText");
console.log(submitButton, spinner, submitText)
}
// if you want a specific button you use the index
console.log(submitButtons[3])

<button class="submit-button">
<div class="spinner hidden"></div>
<span class="buttonText">Submit Now</span>
</button>
<button class="submit-button">
<div class="spinner hidden"></div>
<span class="buttonText">Submit Now</span>
</button>
<button class="submit-button">
<div class="spinner hidden"></div>
<span class="buttonText">Submit Now</span>
</button>
<button class="submit-button">
<div class="spinner hidden"></div>
<span class="buttonText">Submit Now</span>
</button>
<button class="submit-button">
<div class="spinner hidden"></div>
<span class="buttonText">Submit Now</span>
</button>