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

回答

相关问题