Javascript-单击其他按钮时，单击具有类或ID的多个元素

Question

我想单击一个按钮，该按钮同时单击其他按钮或每个按钮之间都存在延迟。 这些其他按钮共享相同的类，其ID以相同的命名方式开头。 我知道我可以使用jQuery轻松完成此操作，但我想使其与Vanilla Javascript一起使用。

我尝试使用querySelector，但这只会触发第一个元素。 另外，我发现了另一个为每个按钮设置超时的解决方案，问题是在加载窗口时会触发该超时，并且当我单击另一个按钮时我需要它工作。

这是我的html代码：

<div>
  <button class="bundle-product-button" id="button1" onClick="alert('click button1');">Button 1</button>
  <button class="bundle-product-button" id="button2" onClick="alert('click button2');">Button 2</button>
  <button class="bundle-product-button" id="button3" onClick="alert('click button3');">Button 3</button>
</div>
<button class="add-bundle-to-cart">Trigger</button>

这只会触发第一个按钮：

function testOne() {
    document.querySelector(".bundle-product-button").click();
}
document.querySelector(".add-bundle-to-cart").onclick = testOne;

并在窗口加载时触发：

var clickcallback = function(i) {
  setTimeout(function() {
    let id = "button" + i;
    document.getElementById(id).click();
  }, 1000); // one second
  if(i <= 3) {
    clickcallback(i+1);
  }
};
clickcallback(1);

我知道这可能很简单，但是单击一个元素时如何触发多次单击。

Answer 1

querySelector只匹配第一个元素，您必须使用querySelectorAll然后为每个

function testOne() {
    document.querySelectorAll(".bundle-product-button").forEach(function(el) {
       el.click();
    });
}
document.querySelector(".add-bundle-to-cart").onclick = testOne;