javascript - JQuery 绑定(bind)在同一元素上，独特的行为

Question

我的问题很简单。我正在使用一个 CMS，网站编辑者可以在同一页面上拖放多个小部件。

小部件都具有完全相同的 html。例如，可以有轮播、照片库等。我已经编写了 javascript 来使这些小部件具有交互性，但是如何使每个小部件独立运行。

例如，单击一个轮播上的下一个按钮，不应滚动页面中的所有轮播。

所以我不能做这样的事情:

   function bindEvents() { 
       $('.next').on({ 
           click: function () { 
              ...
           }
        });
    }

因为所有的小部件都有相同的 html ，例如:

<div class='carousel'>
    ....
    <span class='next'>Next</span>
    ....
</div>

我真的很感激一些帮助。谢谢!

Answer 1

通过使用小部件包装器作为所有代码的上下文，隔离页面中的重复元素通常相当简单

$('.next').on('click', function() {
    /* store the current widget element and make all searches from this point*/
    var $carousel = $(this).closest('.carousel');
    $carousel.find('.someClass').doSomething();
    $carousel.find('.anotherClass').doSomethingElse()
});

只有与按钮位于同一轮播中的元素才会受到影响，因为它们仅在按钮的父轮播中搜索

您可以通过检查小部件的附加类来对此进行扩展

<div class='carousel slideshow'>

/* within above handler code */
if( $carousel.is('.slideshow') ){
  /* run code specific to slideshow class of carousel only */
}