0

私の質問はかなり単純です。サイトの編集者が同じページに複数のウィジェットをドラッグ アンド ドロップできる CMS を使用しています。

ウィジェットはすべてまったく同じ html を持っています。たとえば、カルーセル、フォト ギャラリーなどがあります。これらのウィジェットをインタラクティブにするために JavaScript を作成しましたが、各ウィジェットを個別に動作させるにはどうすればよいですか。

たとえば、1 つのカルーセルで次のボタンをクリックしても、ページ内のすべてのカルーセルがスクロールされるべきではありません。

だから私は次のようなことはできません：

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

すべてのウィジェットが同じ html を持っているためです。次に例を示します。

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

助けていただければ幸いです。ありがとう！

4

1 に答える 1

2

ウィジェット ラッパーをすべてのコードのコンテキストとして使用することにより、通常、ページ内の繰り返し要素を分離するのは非常に簡単です。

$('.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 */
}
于 2012-10-27T14:13:27.543 に答える