使用jQuery。不能用。對處理粘結劑

我有一個函數如下：使用jQuery。不能用。對處理粘結劑

$(document).on("click", ".songTilesGenreContainer", function() { 
    if ($(this).find(".actualTilesContainer").hasClass("minimalized")) { 
     $(this).find(".actualTilesContainer").removeClass("minimalized"); 
     $(this).find(".actualTilesContainer").addClass("maximized"); 
     $(this).find(".actualTilesContainer").slideDown(); 
    } 
    else { 
     $(this).find(".actualTilesContainer").removeClass("maximized"); 
     $(this).find(".actualTilesContainer").addClass("minimalized"); 
     $(this).find(".actualTilesContainer").slideUp(); 
    } 
});

每當在.songTilesGenreContainer用戶點擊它要了slideDown或效果基本show取決於它具有類。問題是，在那個容器中，我有一些可以點擊的元素，當點擊指定的元素時，我希望.songTilesGenreContainer不要滑動。據我所知，使用.not函數完全符合我的要求，但是如何將它與.on事件處理程序一起使用呢？謝謝

來源

2011-11-29 Alan Budzinski

的http：// api.jquery.com/not/ –

你應該鏈接你的東西並緩存你的選擇器，這樣你就不會執行那麼多次。 'var $ myThing = $（'。actualTilesContainer'，$（this））;''$ myThing.removeClass（）。addClass（）。slideDown（）;' – Mathletics

注意：你確定沒有一個更高效的監聽器文件？它應該是最接近的祖先，沒有被損壞/修改的風險，使得綁定失去了。 –

將一個類添加到您不想執行所需代碼的所有元素。在點擊處理程序檢查事件目標，如果它有這個類，那麼就不要做任何事情。試試這個

$(document).on("click", ".songTilesGenreContainer", function (e) { 

     //Check if the target has that class 
     if($(e.target).hasClass("className")){ 
      e.stopPropagation(); 
      return false; 
     } 

     if ($(this).find(".actualTilesContainer").hasClass("minimalized")) { 
      $(this).find(".actualTilesContainer").removeClass("minimalized"); 
      $(this).find(".actualTilesContainer").addClass("maximized"); 
      $(this).find(".actualTilesContainer").slideDown(); 
     } 
     else { 
      $(this).find(".actualTilesContainer").removeClass("maximized"); 
      $(this).find(".actualTilesContainer").addClass("minimalized"); 
      $(this).find(".actualTilesContainer").slideUp(); 
      } 
     } 
    });

來源

2011-11-29 21:04:59 ShankarSangoli

不起作用：\ –

我忘了添加返回'false'現在試試我編輯的答案。 – ShankarSangoli

仍然無法正常工作 –

你可以使用

$('.actualTilesContainer').toggleClass('maximized'); //have minimised class as default 
$('.actualTilesContainer').slideToggle();

我覺得if語句你是不必要的尤其是對jQuery的。

所以最終的代碼如下所示：

$('.songTilesGenreContainer').on('click', '.songTilesGenreContainer', function(){ 

    $('.actualTilesContainer').toggleClass('maximized'); //have minimised class as default 
    $('.actualTilesContainer').slideToggle(); 
});

來源

2011-11-29 21:05:11 adamjmarkham

在jquery文檔它說：從版本1.7開始，建議不要使用.live，但使用.on –

@Alan您的權利我編輯了我的答案。謝謝。 – adamjmarkham

你應該點擊處理程序綁定到孩子的，然後做一個

event.stopPropagation();

將從浮上了」 .songTilesGenreContainer停止點擊「父母！

來源

2011-11-29 21:09:05

它們是什麼樣的元素？如果附加有一個單擊處理程序，那麼你可以做像這樣：

var $elements = $(".songTilesGenreContainer"); 

$elements.find(".elementsYouDontWantToTriggerSlideUp").on("click", function(ev) { 
    ev.stopPropagation(); 
    // do your stuff 
}); 

// toggle handler is attached >after< (it won't work otherwise, as handlers 
// are executed in their bind order) 
$elements.on("click", function(ev) { 
    // >>>> ALWAYS <<<< cache you elements is you reuse them, or use chaining 
    var $elelements = $(this).find(".actualTilesContainer"); 

    $elelements.toggleClass("minimalized maximized").slideToggle(); 
});

如果他們不已經有一個處理，你可以做這樣的：

$(".whatEver").on("someevent", function(ev) { 
    // ev.target contains the actual element that was clicked 
    var $target = $(ev.target); 

    // then you could use 
    $target.is('.someSelector') 
    // to see if the element that was clicked should "trigger" or not the effect 

});

來源

2011-11-29 21:18:43 pomeh

試過這個，但並沒有真正爲我工作，並創建了更多的混亂 –

好吧。所以你可以添加一些HTML內容到你的代碼片段並解釋你想做什麼？哪些元素應該/不應該觸發效果？ :) – pomeh

使用jQuery。不能用。對處理粘結劑

回答

相關問題