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或 class 与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>

Answer 2

nextElementSibling在这种情况下似乎可以工作。

var btn1 = document.getElementById("btn");
var btn2 = btn1.nextElementSibling;
btn1.addEventListener("click",function(e){
console.log("btn1");
});
btn2.addEventListener("click",function(e){
console.log("btn2");
});

<div>
<button id="btn" class="btn1">butotn 1</button>
<button id="btn" class="btn2">butotn 2</button>
</div>

如何在addEventListener中捕获两个相同的ID但不同的类

2 个答案: