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

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而不需要“活”事件

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

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

为您的具体情况，首先你需要为所有的元素选择，如果在开始所有的人都打开，使用$（”开‘），如果它是一个mixin，使用$（’开放，.close“），并肯定有一个更好的选择器，如$（”＃parent> article“），只需检查您的html是否为

这里我们没有得到您的html，所以我认为它是一个mixin，$ “开，.close”）

我们需要检查当前类，做不同的动作，jQuery的获取函数来检查类

$(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'); 
    } 
}); 

，但它仍然有一些redondant代码，让简化这个更多：

$(".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]); 
});