javascript - 如何在addEventListener中捕获两个相同的id但不同的类

Question

首先，感谢您花时间阅读这个问题，还有两件事，我使用 ES5 并且不使用 jQuery。

现在我正在努力找出 addEventListener 的正确解决方案是什么，因为由于某种原因它不会触发仅适用于移动屏幕尺寸的第二个按钮，问题是第二个按钮有相同的 id 但不同的类，例如:

 <div class="product-bg-container product-general-info variation-info">
  <input type="hidden" name="sku" value="Something-15892290" id="selected-option">

  {/* Desktop screen button */}
  <button id="buy-now" class="btn btn-lg hidden-sm-down btn-primary">
    Add to Cart
  </button>

  {/* Mobile screen button */}
  <button id="buy-now" class="btn btn-lg hidden-md-up btn-primary"> 
    Add to Cart 
  </button>
 </div>

我试图触发第二个按钮，但它没有在我不明白为什么会这样做的地方，如果 id 相同，应该不重要，所以我试图弄清楚如何从第一个按钮触发如果单击了按钮，则单击了第二个按钮，如果单击了第二个按钮，但我没有主意了......

var button = document.getElementById('buy-now');

if (!button) {
    return;
  }

button.addEventListener('click', function trackAddToCart() { 
  // more code for the event
}

我想到了一个捕获按钮属性的想法，但它适用于第一个按钮，但不适用于第二个按钮:

var button = document.getElementById('buy-now');
var att = button.getAttribute('class');

  button.addEventListener('click', function() {
        console.log('class ' + att); //shows: class:    btn btn-lg hidden-sm-down btn-primary
        console.log('button class? '+ button); //shows:  button element: [object HTMLButtonElement]
      });

但是当我单击第二个按钮时...不会触发或什么也没有发生，不知道为什么...并且我无法更改 id 值(这应该很容易，但我不能“公司标准”)

任何人都可以帮助我了解如何捕获和触发第二个按钮的事件吗？

Answer 1

属性id在文档中必须是唯一的。您可以使用attributeStartsWith selector或类 querySelectorAll() 。然后循环遍历所有按钮以分别附加事件(click):

//var button = document.querySelectorAll('.btn.btn-primary');
var button = document.querySelectorAll('[id^=buy-now]');
button.forEach(function(btn){
    btn.addEventListener('click', function() {
      console.log('class ' + this.classList);
      console.log('button class? '+ this.id);
    });
});

<div class="product-bg-container product-general-info variation-info">
  <input type="hidden" name="sku" value="Something-15892290" id="selected-option">

  <button id="buy-now" class="btn btn-lg hidden-sm-down btn-primary">
    Add to Cart
  </button>

  <button id="buy-now2" class="btn btn-lg hidden-md-up btn-primary"> 
    Add to Cart 
  </button>
</div>