父类"highlight“上的Jquery Click事件
父类"highlight“上的Jquery Click事件
提问于 2013-02-23 01:52:55
正在尝试在“高亮显示”的父级上添加单击事件。正确地添加和删除类，但单击事件在addClass为close之后停止。
$(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');
});
});回答 2
Stack Overflow用户
发布于 2013-02-23 01:58:40
当代码运行时，代码只会将事件绑定到当前与选择器匹配的元素。
您可以使用"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');
Stack Overflow用户
发布于 2013-02-23 02:00:45
因为您在相同的元素上使用了这两个类，所以您的代码是重复的，不需要“实时”事件
因为我们不使用"live“事件，所以jquery永远不会更新选择器所针对的元素，所以如果将来它们与原始选择器不匹配，那么click事件将继续处理它们
$(".open").click(function(){
alert("click!");
}).removeClass("open");对于你的特定情况，首先你需要一个选择器来选择你所有的元素，如果在开始时所有的元素都被打开了，使用$(".open")如果它是一个混合的，使用$(".open，.close")，当然还有一个更好的选择器，比如$("#parent >文章“)只需检查你的html
这里我们没有得到你的html，所以我假设它是一个混合的，$(".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]);
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/15030258
复制相关文章
相似问题
腾讯云开发者
