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(){}) блок?

Нажатие кнопки паузы/воспроизведения/остановки также не должно вызывать меню. Я хотел бы, чтобы кнопки обрабатывались так, как если бы они не находились внутри родителя вообще, если это возможно.

Answer 1

Вы можете предоставить несколько селекторов CSS. В вашем случае выглядит .trackInfo ДИВ содержит кнопки воспроизведения/паузы, так что код будет

.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

Вам не нужно связывать все ваши звонки вместе. Просто отделите их и сделайте еще один звонок find на свой .track объект.

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