0

试图在“highlight”的父级上添加一个点击事件。正确添加和删除类，但单击事件在关闭 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');
    });
});
4

2 回答 2

1

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

您可以使用“on”事件绑定将事件绑定到当时将匹配选择器的元素。

$("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)一个变量以避免重复包装this在 jQuery 对象中，但您可以改为链式：$(this).removeClass('close').addClass('open');

于 2013-02-22T17:58:39.540 回答
0

当您在相同元素上使用这两个类时，您的代码是多余的，不需要“实时”事件

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

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

对于您的特定情况，首先您需要一个用于所有元素的选择器，如果在开始时所有元素都已打开，则使用 $(".open") 如果它是 mixin，则使用 $(".open, .close")，并且当然必须有更好的选择器，例如 $("#parent > article") 只需检查您的 html 即可

在这里我们没有得到你的 html，所以我假设它是一个 mixin，$(".open, .close")

我们需要检查当前类并做了不同的动作，jquery get 函数来检查一个类

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

或者

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

=>

$(".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]);
});
于 2013-02-22T18:00:44.950 回答