Question

我正在使用一些jquery通过点击附加按钮来隐藏一些woocommerce div但我遇到的问题是点击第一个也关闭了第二个（即woocommerce-message以及woocommerce- info div）。

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和炒鸡蛋一样难看！

Answer 1

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

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

Jquery fadeout隐藏了所有DIVS

1 个答案: