jquery淡出隱藏所有DIVS

我正在使用一些jquery隱藏一些woocommerce div的點擊一個附加按鈕，但我有問題點擊第一個也關閉第二（即woocommerce消息以及woocommerce -info div）。jquery淡出隱藏所有DIVS

jQuery(function($) { 
    $('.woocommerce-message').append('<button class="hideme1">x</a>'); 
    $("button.hideme1").click(function() { 
     $(".woocommerce-message").fadeOut("slow"); 
    }); 

}); 

jQuery(function($) { 
    $('.woocommerce-info').append('<button class="hideme2">x</a>'); 
    $("button.hideme2").click(function() { 
     $(".woocommerce-info").fadeOut("slow"); 
    }); 
});

我確實把它們放在一起，試圖將它們分開以及使用不同的按鈕類。任何指針？嘗試自己學習這一點，所以任何幫助非常感激！

編輯：這似乎工作得益於Satpal和Rory;

jQuery(function($) { 
    $('.woocommerce-message').append('<button class="hideme">x</a>'); 
    $('.woocommerce-info').append('<button class="hideme">x</a>'); 
    $("button.hideme").click(function() { 
     $(this).closest(".woocommerce-message").fadeOut("slow"); 
     $("button.hideme").click(function() { 
      $(".woocommerce-info").fadeOut("slow"); 
     }); 
    }) 
})

我的jquery/js和炒雞蛋一樣醜陋！

來源

2017-02-17 Jason King

請注意，您不需要使用單獨的DOM就緒處理程序 - 兩個代碼塊可以合併到一個 –

謝謝，將做。 –

我不得不說，這不能100％的工作，因爲它需要2次點擊關閉「子」元素。我想弄明白爲什麼。 –

您需要使用.closest()來定位當前元素上下文中的父元素。

$('.woocommerce-message').append('<button class="hideme1">x</a>'); 
$("button.hideme1").click(function() { 
    $(this).closest(".woocommerce-message").fadeOut("slow"); 
});

來源

2017-02-17 11:45:59 Satpal

謝謝友善。將閱讀這個。編輯過的代碼有效（希望更正？） –

jquery淡出隱藏所有DIVS

回答

相關問題