当您单击 ( ".toggle-button a")
时,它会向自身添加 .close
类。并在 .info-overlay
这工作正常,但是当您再次单击它时,我希望 info-overlay
再次淡出,并且 close
类被删除。但这不起作用。
我在这里遗漏了什么吗?
http://jsfiddle.net/bazzle/xpS9P/1/
html
<div class="toggle-button">
<a>click</a>
</div>
<div class="info-overlay">
content
</div>
CSS
.info-overlay{
display:block;
width:100px;
height:100px;
background-color:green;
display:none;
};
js
$( ".toggle-button a" ).click(function() {
$( ".info-overlay" ).fadeIn("500");
$(this).addClass('close');
});
$( ".toggle-button a.close" ).click(function(){
$( ".info-overlay").fadeOut("500");
$(this).removeClass('close');
});
最佳答案
使用事件委托(delegate):
改变
$( ".toggle-button a.close" ).click(function(){
$( ".info-overlay").fadeOut("500");
$(this).removeClass('close');
});
至:
$(document).on('click',".toggle-button a.close",function(){
$( ".info-overlay").fadeOut("500");
$(this).removeClass('close');
});
因为 .click()
是附加并忘记处理程序,但 .on()
是动态的。
关于javascript - JQuery - 将类添加到元素上,然后与该类交互不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23057909/