事件监听器的问题

如何解决事件监听器的问题

我想在点击四个按钮之一后进行操作。不幸的是，只工作一个，并不是很好。请帮忙 ！！！ :( 单击四个箭头之一后，我的菜单应展开。 NIestetty 在这一点上，菜单只会在单击一个箭头后展开，所以我无法折叠它。关闭循环中的记录后。菜单展开又折叠，但所有四个部分都展开了，而不是我选择的那个。此外，函数继续仅对四个箭头之一做出反应。

initaccordion(){
      const thisProduct=this;

      /* find the clickable trigger (the element that should react to clicking) */
      const clickableTrigger = document.querySelector(select.menuProduct.clickable);

      /* START: add event listener to clickable trigger on event click */
      clickableTrigger.addEventListener('click',function(event) {
      /* prevent default action for event */
        event.preventDefault();

        /* find active product (product that has active class) */
        const findActiveClass = document.querySelectorAll(select.all.menuProductsActive);
        
        /* if there is active product and it's not thisProduct.element,remove class active from it */
      for (let activeLink of findActiveClass){
          thisProduct.element = activeLink;
          activeLink.classList.remove(classNames.menuProduct.wrapperActive);
        }
        
        

        /* toggle active class on thisProduct.element */
        thisProduct.element.classList.toggle(classNames.menuProduct.wrapperActive);
      });
    }

<script id="template-menu-product" type="text/x-handlebars-template">
      <article class="product "> <!-- product -->

          <header class="product__header">
            <h3 class="product__name no-spacing">{{ name }} <i class="fas fa-chevron-down product__icon"></i></h3>
            <p class="product__base-price no-spacing">${{ price }}</p>
          </header>
          <div class="product__description"> <!-- description -->
            <p>{{{ description }}}</p>
          </div> <!-- .description -->
          <div class="product__wrapper"> <!-- details -->
            <form class="product__order">
              <ul class="product__params"> <!-- params -->
                {{#each params as |param paramId| }}
                {{#ifEquals type "checkBoxes"}}
                <li> <!-- checkBoxes -->
                  <h3 class="product__params-title">{{{ label }}}</h3>
                  {{#each options}}
                  <div class="checkBox"> <!-- checkBox -->
                    <label>
                      <input type="checkBox" name="{{ paramId }}" value="{{ @key }}" id="{{ @key }}" {{#if default}}checked{{/if}}>
                      <span class="checkBox__checkmark"></span>
                      {{{ label }}} (${{{ price }}})
                    </label>
                  </div>
                  {{/each}}
                </li>
                {{/ifEquals}}
                {{#ifEquals type "radios"}}
                <li> <!-- radios -->
                  <h3 class="product__params-title">{{{ label }}}</h3>
                  {{#each options}}
                  <div class="checkBox checkBox--round"> <!-- radio -->
                    <label>
                      {{{ label }}} (${{{ price }}})
                      <input type="radio" name="{{ paramId }}" value="{{ @key }}" id="{{ @key }}" {{#if default}}checked{{/if}}>
                      <span class="checkBox__checkmark"></span>
                    </label>
                  </div>
                  {{/each}}
                </li>
                {{/ifEquals}}
                {{#ifEquals type "select"}}
                <li> <!-- select -->
                  <h3 class="product__params-title">{{{ label }}}</h3>
                  <select name="{{ paramId }}">
                    {{#each options}}
                    <option value="{{ @key }}" {{#if default}}selected{{/if}}>{{{ label }}} (${{{ price }}})</option>
                    {{/each}}
                  </select>
                </li>
                {{/ifEquals}}
                {{/each}}
              </ul>
              <div class="amount"> <!-- controls -->
                <div class="widget-amount"> <!-- widget-amount -->
                  <h3 class="product__params-title">Select quantity</h3>
                  <a class="btn-quantity" href="#less"><i class="fas fa-minus"></i></a>
                  <input type="text" name="amount" value="1">
                  <a class="btn-quantity" href="#more"><i class="fas fa-plus"></i></a>
                </div>
                <p class="product__total-price">
                  Total: $<span class="price">{{{ price }}}</span>
                </p>
                <div> <!-- add-to-cart -->
                  <a class="btn-primary" href="#add-to-cart">Add to cart</a>
                </div>
              </div>
            </form>
            <div class="product__images {{ class }}"> <!-- images -->
              {{#each images}}
              {{{ this }}}
              {{/each}}
            </div>
          </div>

      </article> <!-- .product -->
    </script>

解决方法

如果你想在JS中添加多个EventListener，你必须.querySelectorAll()元素 和 forEach 他们像这样：

<button class="myButton">Click me</button>
<button class="myButton">Click me too</button>
<button class="myButton">Click me too again</button>
<button class="myButton">Click me too again also</button>

var myButtons = document.querySelectorAll("myButton");
myButtons.forEach(button=>{
 button.addEventListener("click",() => {
   // do something
 });
});