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

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 */
}