Question

我有一个图像，我想在其中调用点击和重新点击功能。所以我使用了.toggle()函数而不是.click()函数，但它隐藏了图片而没有点击，所以我决定在.click()函数中点击并重新点击函数，如下所示：

$('.imgclass').click(function(){
   $(this).addClass('btn');
    if($(this).attr('class','btn')){

        $(this).css('background-color','blue');
        $(this).removeClass('btn');
    } else {
        alert('sorry');
    }
});

但在我的代码中，else语句不起作用。在第一次单击时，它将背景颜色添加到蓝色并删除它的类，然后它将找不到类btn所以它应该警告'抱歉'但它没有警报。我认为在.click()函数中进行单击和重新单击功能还有其他最好的想法。如何做到这一点？

demo

Answer 1

$('.imgclass').click(function(){

   $(this).toggleClass('btn');

    if($(this).hasClass('btn')){
        $(this).css('background-color','blue');
    } else {
        alert('sorry');
    }
});

为了使你的if案例有效，你需要使用attr中的getter：

if($(this).attr('class') === 'btn'){

如果btn是按钮上的唯一类，那么这只适用于击球。不过，我推荐我的方法。

Answer 2

发生这种情况是因为单击按钮后，

添加班级btn（总是）
询问是否有btn class
总是发现有btn类（因为你在步骤1中点击后立即添加了它）。

编辑：我建议你将addClass移动到else块中。

Answer 3

试试这个，

$('.imgclass').click(function(){
    if($(this).hasClass('btn')){
        $(this).removeClass('btn');
    } else {
        $(this).addClass('btn');
    }
});

小提琴 http://jsfiddle.net/xQNK6/3/

或者只是

$('.imgclass').click(function(){
    $(this).toggleClass('btn');       
});

小提琴 http://jsfiddle.net/xQNK6/6/

Answer 4

您的if条件错误。

为了检查元素是否有类，您应该使用hasClass函数：

 if($(this).hasClass('btn')){

您正在设置class属性并检查它是否设置正确。

您的完整代码可能如下所示：

$('.imgclass').click(function(){
   $(this).addClass('btn');
    if($(this).hasClass('btn')){

        $(this).css('background-color','blue');
        $(this).removeClass('btn');
    } else {
        alert('sorry');
    }
});

虽然我建议你像其他队友指出的那样使用toggleClass。

单击并重新单击单击功能中的功能

4 个答案: