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

JQuery绑定相同的元素，独特的行为

1 个答案: