1

これらの関数が実行していることを実行している理由を理解するためのガイダンスが必要です...

1.）私のWebページには、スライダー機能を利用する3つの異なるパネルがあります。この機能は、次および前のアンカーリンクを使用してスライダー機能を持つ順序付けられていないリストを作成します。以下のコードを参照してください。

function Slider(id) {
    var _this = this;
    this.id = id;
    if (!id) return false;
    this.index = 0;
    this.slider = $(this.id);
    this.length = this.slider.children().length;
    this.width = $(this.id).outerWidth();
    this.totalWidth = this.length * this.width;
    $(id).addClass('slideWrapper').wrap('<div class="slideViewport">').after('<div class="sliderNav"><a href="#" class="prev">Previous</a><a href="#" class="next">Next</a></div>').css({
      'width': this.totalWidth
  }).children().addClass('slide').css({
      'width': this.width
  });

  $('.slideViewport a.next').click(function(e) {
    e.preventDefault();
    return _this.next();
  });

  $('.slideViewport a.prev').on(function(e) {
    e.preventDefault();
    return _this.prev();
  });
}

ページ上でこれらのSliderインスタンスを複数実行しようとすると、.nextアンカーをクリックすると、クリックされた要素とその下の要素のいずれかが、スライドショーの次のリスト要素に移動します。2番目のパネルに移動すると、最初のパネルを除くすべてが実行され、3番目のパネルでは、1番目と2番目を除くすべてが実行されます。ハンドラーは、すべてのインスタンスではなく、クリックしたイベントに対してのみ実行されると予想していました。私thisは私のイベントで使用しているので、その後のクラスの。ここで何が起こっているかについての説明は非常に役に立ちます。

2.）今、私は、アンカーがクリックしました。私はこのコードが機能することを理解しました：

$('.slideshow').on("click", "a.next", function(e) {
   e.preventDefault();
   return _this.prev();
});

しかし、私が言った真実は、なぜこれが機能しているのかよくわかりません。私の理解では、JQueryはa.nextアンカーがクリックされたかどうかを確認するだけで、処理関数を$（'。slideshow'）セレクターに渡します。これにより、$（ 'slideshow'）そしてそれらすべてに対して.next（）関数を実行します。それはそれについて考える正しい方法ですか？

3.）次のコードスニペットにより、すべてのスライドショーでnext（）関数が1回ではなく、2回実行されるのはなぜですか？これが何も返さないのは本当に好きではないので、この特定のコードを使用したくはありませんが、もう少しよく理解したいと思います...

$('.slideViewport a.next').on("click", function(e) {
   e.preventDefault();
   $('.slideshow').each(function() {
     _this.prev();
   }
});

このコードのいずれかを理解するのを手伝っていただければ幸いです。このシナリオでの伝播の観点から、DOMで何が起こっているのかをもっとよく理解したいのですが、私が読み込もうとしたすべてのことで、私はさらに混乱したように感じました。ありがとう！

4

1 に答える 1

2

このコードは、ドキュメント内のすべての.slideshow 要素にクリック ハンドラーを追加します。

$('.slideshow').click(function(e) {
    e.preventDefault();
    return _this.prev();
});

あなたが望んでいたのは、スライダーの子孫である .slideshow 要素にのみハンドラーをアタッチすることでした:

this.slider.find('.slideshow').click(function(e) {
    // ... handle event here ...
});

さて、あなたのon()声明について：

$('.slideshow a.next').on("click", function(e) {
   e.preventDefault();
   $('.slideshow').each(function() {
     _this.prev();
   }
});

ここで行ったことは、クリック イベント ハンドラーをすべての.slideshow a.next要素にバインドすることであり、ハンドラーが行うことはすべての要素で実行_prev()されます。ただし、 を呼び出したときから、要素にバインドされた別のハンドラーが既にあり.slideshow$('.slideshow').click()ます。「on」ハンドラーが終了すると、イベントは引き続き DOM ツリーを伝播し、要素にバインドしたものを含め、その途中ですべてのクリック ハンドラーをトリガーします.slideshow。そしてもちろん、そのハンドラも を呼び出します_prev()。

イベントの伝播を停止する場合は、2 つの選択肢があります。

  1. 電話e.stopPropagation()
  2. イベント ハンドラーから false を返します (これにより、jQuery は伝達を停止し、既定のアクションを回避するように指示されます)。

click()「との違いは何ですかon('click', ...)。このon()メソッドを使用すると、Event Delegationを使用できます。基本的に、これは、1 つの DOM ノードにアタッチされた単一のイベント ハンドラーを使用して、多くの子孫要素のイベントを処理することを意味します。

例として、任意の数の画像を含む div があり、画像がクリックされるたびに何かを行う必要があるとします。(a) クリック イベント ハンドラーを各画像にバインドするか、(b) すべての画像のすべてのクリック イベントを処理する div にハンドラーをバインドします。これらのイベントは DOM ツリーをバブル アップします。

$('#imageDiv').on('click', 'img', function(evt) {
    // ... "this" is the image that was clicked ...
});

委任には、コンテナーからイメージを追加および削除できるという追加の利点があり、委任は引き続き機能します。

于 2013-01-25T23:41:25.930 に答える