jQuery-將類添加到元素上，然后與該類進行交互不起作用

Question

當您單擊( ".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');
});

Answer 1

使用事件委托：

更改

$( ".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()是動態的。

Answer 2

查看更新的小提琴

    $( ".toggle-button a" ).click(function() {
        if($(this).hasClass('close')){
        $( ".info-overlay").fadeOut("500");
         $(this).removeClass('close');
        }else{
        $( ".info-overlay" ).fadeIn("500");
        $(this).addClass('close');
    }
    });

引用hasClass（）

Answer 3

您可以使用委派，也可以按照以下方式設置邏輯：

演示

$(".toggle-button a").click(function () {
    $(".info-overlay").fadeToggle(500).toggleClass('close');
});