Question

所以这就是我想做的事情;

点击其中一个按钮添加“点击”类

再次点击同一按钮以显示提醒。

目前，警报会在同一次点击时出现。

由于

HTML

<div class="button">
button click here
</div>
<div class="button">
button click here
</div>
<div class="button">
button click here
</div>

的jQuery

$('.button').each(function(){

$(this).on('click',function(){

    $(this).addClass('clicked');

    if ( $(this).hasClass('clicked') ){    
        alert('bingo');
    };

});

});

CSS

.button{
background-color:red;
color:white;
padding:1em;
margin:5px;
text-align:center;
}

.clicked{
background-color:black;
}

Answer 1

稍微改变你的代码：

  if ( $(this).hasClass('clicked') ){    
        alert('bingo');
    } else {
        $(this).addClass('clicked');
    };

Answer 2

你需要 $(this).addClass('clicked'); 在你的if语句之后。现在您要添加该类，然后检查该类。

Answer 3

在进行提醒之前，只需进行测试，如果课程尚不存在，请添加课程：

$('.button').each(function(){
    $(this).on('click',function(){

        if ( $(this).hasClass('clicked') ){    
            alert('bingo');
        } else {
            $(this).addClass('clicked');
        }

    });
});

但是each循环没有任何理由。代替：

$(".button").on('click',function(){

    if ( $(this).hasClass('clicked') ){    
        alert('bingo');
    } else {
        $(this).addClass('clicked');
    }

});

它仍然可以按每个按钮工作，因为在click事件处理程序中，this将仅引用被点击的元素。

如果您想要切换，您还可以在removeClass之后使用alert，但我不确定您是否想要这样做。

Answer 4

只需单独进行：

$(document).on("click", ".button:not(.clicked)", function () {
    $(this).addClass("clicked");
});
$(document).on("click", ".button.clicked", function () {
    alert("bingo");
});

Answer 5

这里不需要

each() 。

$('.button').on('click',function(){
    if ( $(this).hasClass('clicked') )
        alert('bingo');
    else
        $(this).addClass('clicked');
});

jQuery - 函数后跟if条件在同一个事件中

5 个答案: