jQuery onclick具有相同类的多个元素 [英] jQuery onclick multiple elements with the same class

问题描述

我一直在寻找这一点，我认为我正处在答案的尖端，但我被卡住了！基本上，我正在寻找点击一个元素，这将依次点击同一类的两个其他元素。当我这样做时，点击一个元素，而另一个元素不是：

  jQuery（'。et-pb-arrow （''click'，function（）{
 jQuery（'a.et-pb-arrow-prev'）。click（）; 
 console.log（'DONE'） ; 
}）; 
  

我可以切换元素以避免点击元素，而不是其他元素，但我无法让其他两个元素点击。相反，我得到这个错误：

  Uncaught RangeError：最大调用堆栈大小超过
  

我想我快到了，但现在我迷了路。任何帮助，将不胜感激。

解决方案

当您触发点击时，当前元素的点击处理程序会再次被调用，这是调用堆栈错误的原因。 p>

< （'。et-pb-arrow-prev'）。on（'class =snippet-code>

<点击'，函数（e，手动）{if（typeof manual ==='undefined'|| manual === false）{jQuery（'a.et-pb-arrow-prev'）。not（this）.trigger （'click'，true）; console.log（'Triggered'，this.textContent.trim（））;} else {console.log（'DONE'，this.textContent.trim（））;}}）; / code>

 < script src =https：//ajax.googleapis .com / ajax / libs / jquery / 2.1.1 / jquery.min.js>< / script>< a class =et-pb-arrow-prevhref =＃> a>< a class =et-pb-arrow-prevhref =＃> 2< / a> < a class =et-pb-arrow-prevhref =＃> 3< / a>< a class =et- a>  

I have been doing a fair bit of searching for this one, and I think I am on the cusp of the answer, but I am stuck! Basically, I am looking to click one element which will in turn click two other elements of the same class. When I do this, one element is clicked, whereas the other isn't:

jQuery('.et-pb-arrow-prev').on('click', function(){
    jQuery('a.et-pb-arrow-prev').click();
    console.log('DONE');
});

I am able to switch the elements around so the element not being clicked, is clicked instead of the other, but I can't get both other elements to click. Instead, I am getting this as an error:

Uncaught RangeError: Maximum call stack size exceeded

I think I'm almost there, but I am lost now. Any help would be appreciated.

解决方案

When you trigger the click, the current element's click handler gets called again that is the reason of call stack error.

jQuery('.et-pb-arrow-prev').on('click', function(e, manual) {
  if (typeof manual === 'undefined' || manual === false) {
    jQuery('a.et-pb-arrow-prev').not(this).trigger('click', true);
    console.log('Triggered', this.textContent.trim());
  } else {
    console.log('DONE', this.textContent.trim());
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="et-pb-arrow-prev" href="#">1</a>
<a class="et-pb-arrow-prev" href="#">2</a>
<a class="et-pb-arrow-prev" href="#">3</a>
<a class="et-pb-arrow-prev" href="#">4</a>

这篇关于jQuery onclick具有相同类的多个元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！