Question

My question is rather simple.
I am working with a CMS where editors of the site can drag and drop multiple widgets on the same page.

Widgets all have the exact same html.
For example there can be a carousel, photo gallery, etc.
I have written javascript to make these widgets interactive but how do I make each widget act separately on its own.

For example, clicking on the next button on one carousel, should not scroll all the carousels in the page.

So I can’t do something like:

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

Because all the widgets have the same html , for example:

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

I would really appreciate some help.
Thanks!

Answer 1

Isolating repeating elements in a page is usually fairly simple by using the widget wrapper as the context for all your code

$('.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()
});

Only the elements within the same carousel as the button will be affected since they are being searched within the button’s parent carousel only

You can expand on this by checking the additional class of widget

<div class='carousel slideshow'>

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