多個子對象上的jQuery stopPropagation（）

Question

我有一個歌曲列表，當您單擊一首歌曲時，會出現一個下拉菜單並開始播放歌曲。我已經設置了它，所以如果你點擊下拉菜單，它不會開始拉回自己，你仍然需要點擊原始軌道細節才能恢復。

這個例子是在這裏：http://shacktown.com

我也想這個功能附加到一個不同的按鈕。不過，在另一頁上，我在歌曲標題旁邊放置了播放/暫停按鈕，並且我還要爲其添加stopPropagation()功能。

這裏是頁：http://shacktown.com/oldstage.php

，我正在使用的代碼是在這裏：

$(document).ready(function(){ 
     $('.track').click(function(){ 
      if ($(this).find('.trackPlayer').is(':hidden')) { 
       //removing color from prev. track 
       $(".selectedTrack").removeClass("selectedTrack"); 
       $('.trackPlayer').slideUp(); 
       $(this).addClass("selectedTrack"); 
       $(this).find('.trackPlayer').slideDown(); 

      } else { 
       $(".selectedTrack").removeClass("selectedTrack"); 
       $(this).find('.trackPlayer').slideUp(); 
      } 
     }).find('.trackPlayer').click(function(e) { 
      e.stopPropagation(); 
     }); 
    }); 

我的問題是，我該如何重視這些.find()/stopPropagation()功能，而另一個沒有不必創建另一個$(document).ready(function(){})塊？

點擊暫停/播放/停止按鈕不應該導致菜單下降，如果可能的話，我希望按鈕被視爲完全不在.track父級內。

Answer 1

您可以提供多個CSS選擇器。在你的情況看起來像.trackInfo div包含播放/暫停按鈕，以便代碼將

.find('.trackPlayer, .trackInfo').click(function(e) { 
    e.stopPropagation(); 
}); 

_{酷我音樂，順便說一句！}

Answer 2

您可以在相同的document.ready塊中添加一個新的單擊事件：

$(document).ready(function(){ 
    $('.track').click(function(){ 
     if ($(this).find('.trackPlayer').is(':hidden')) { 
      //removing color from prev. track 
      $(".selectedTrack").removeClass("selectedTrack"); 
      $('.trackPlayer').slideUp(); 
      $(this).addClass("selectedTrack"); 
      $(this).find('.trackPlayer').slideDown(); 

     } else { 
      $(".selectedTrack").removeClass("selectedTrack"); 
      $(this).find('.trackPlayer').slideUp(); 
     } 
    }).find('.trackPlayer').click(function(e) { 
     e.stopPropagation(); 
    }); 

    $('.mybutton').click(function(){ 
     // do stuff here 
    }); 
}); 

Answer 3

您不必將所有呼叫鏈接在一起。只需將它們分開並在.track對象上再撥打find即可。

$(document).ready(function(){ 
    var track = $('.track'); 

    track.click(function(){ 
     if ($(this).find('.trackPlayer').is(':hidden')) { 
      //removing color from prev. track 
      $(".selectedTrack").removeClass("selectedTrack"); 
      $('.trackPlayer').slideUp(); 
      $(this).addClass("selectedTrack"); 
      $(this).find('.trackPlayer').slideDown(); 

     } else { 
      $(".selectedTrack").removeClass("selectedTrack"); 
      $(this).find('.trackPlayer').slideUp(); 
     } 
    }); 

    track.find('.trackPlayer').click(function(e) { 
     e.stopPropagation(); 
    }); 

    track.find('.somethingElse').click(function(e) { 
     e.stopPropagation(); 
    }); 
}); 

如果要保留鏈接，請使用end返回上一個上下文。

$(document).ready(function(){ 
    $('.track').click(function(){ 
     if ($(this).find('.trackPlayer').is(':hidden')) { 
      //removing color from prev. track 
      $(".selectedTrack").removeClass("selectedTrack"); 
      $('.trackPlayer').slideUp(); 
      $(this).addClass("selectedTrack"); 
      $(this).find('.trackPlayer').slideDown(); 

     } else { 
      $(".selectedTrack").removeClass("selectedTrack"); 
      $(this).find('.trackPlayer').slideUp(); 
     } 
    }) 
    .find('.trackPlayer').click(function(e) { 
     e.stopPropagation(); 
    }) 
    .end() 
    .find('.somethingElse').click(function(e) { 
     e.stopPropagation(); 
    }); 
});