开发者问题收集

jQuery onclick 具有相同类的多个元素

2017-08-22
5311
jquery html onclick click

我已经搜索了好久，我想我已经找到了答案，但我被卡住了！基本上，我希望单击一个元素，该元素将依次单击同一类的另外两个元素。当我执行此操作时，一个元素被单击，而另一个元素没有被单击： 

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

我可以切换元素，以便单击未被单击的元素而不是另一个元素，但我无法单击其他两个元素。相反，我收到此错误： 

Uncaught RangeError: Maximum call stack size exceeded

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

3个回答

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

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>
Arun P Johny
2017-08-22

这里的问题是，您的调用函数被设置为无限函数，这意味着第一次点击基于类 .et-pb-arrow-prev ，这将触发另一个点击事件，该事件也是一个类 .et-pb-arrow-prev ，因此它将继续

所以我的建议是将 id 而不是类用于点击事件

RAHUL S R
2017-08-22

这是一个无限循环，导致您收到上述错误。尝试对绑定单击事件的元素使用不同的名称，在该元素中您尝试单击具有相同类的其他两个元素。

这里 是示例 jsfiddle，其中我使用了 .wrapper 类。希望这对您有所帮助。

kmg
2017-08-22