Question

尝试在“突出显示”的父级上添加点击事件。正确添加和删除类，但click事件在关闭的addClass之后停止。

$(function () {
    $(".open").click(function () {
        $('#rslide').animate({
            right: '-375px'
        }, 400);
        $(this).removeClass('open');
        $(this).addClass('close');
    });
    $(".close").click(function () {
        $('#rslide').animate({
            right: '0px'
        }, 400);
        $(this).removeClass('close');
        $(this).addClass('open');
    });
});

Answer 1

您的代码只会将事件绑定到代码运行时当前与选择器匹配的元素。

您可以使用"on" event binding将事件绑定到与当时匹配选择器的元素。

$("body").on("click", ".open", function(event) {
    $self = $(this);
    $('#rslide').animate({
        right: '-375px'
    }, 400);
    $self.removeClass('open');
    $self.addClass('close');
});

$("body").on("click", ".close", function(event) {
    $self = $(this);
    $('#rslide').animate({
        right: '0px'
    }, 400);
    $self.removeClass('close');
    $self.addClass('open');
});

我已将$(this)放入变量中以避免在jQuery对象中重复包装this，但您可以链接：$(this).removeClass('close').addClass('open');

Answer 2

当你在相同的元素上使用这两个类时，你的代码是redondant而不需要“live”事件

因为我们不使用“live”事件，所以jquery永远不会更新选择器所针对的元素，因此如果将来它们与原始选择器不匹配，则click事件将继续对它们起作用

$(".open").click(function(){
    alert("click!");
}).removeClass("open");

根据您的具体情况，首先您需要一个选择器来处理所有元素，如果在开始时打开所有元素，请使用$（“。open”）如果是mixin，请使用$（“。open，.close” ），当然必须有一个更好的选择器，如$（“＃parent＆gt; article”），只需检查你的html

这里我们没有得到你的HTML，所以我认为它是一个混合，$（“。open，.close”）

我们需要检查当前类并完成不同的操作，jquery get函数检查类

$(this).hasClass("open");

或

$(this).is(".open");

=＆GT;

$(".open, .close").click(function(){
    var isOpen = $(this).hasClass("open");

    if(isOpen) alert("opened!"); else alert("closed!");
});

使用您当前的代码：

$(".open, .close").click(function(){
    var $t = $(this);
    var isOpen = $t.hasClass("open");

    if(isOpen){
        $('#rslide').animate({right:-375},400);
        $t.removeClass('open').addClass('close');
    } else {
        $('#rslide').animate({right:0},400);
        $t.removeClass('close').addClass('open');
    }
});

但它仍然是一些重新代码，让我们更简单一点：

$(".open, .close").click(function(){
    var $t = $(this);
    var isOpen = $t.hasClass("open");
    $('#rslide').animate({right:(-375*isOpen)},400);
    $t.toggleClass('open').toggleClass('close');
});

toggleClass当然不是很好，它必须先检查类，尝试删除它

$(".open, .close").click(function(){
    var $t = $(this);
    var isOpen = $t.hasClass("open") * 1;
    var cls = ["open","close"];
    $('#rslide').animate({right:(-375*isOpen)},400);
    $t.removeClass(cls[!isOpen]).addClass(cls[isOpen]);
});

Jquery单击父类的事件“突出显示”

2 个答案: