1

我有一个图像，我想在其中调用单击并重新单击功能。所以我使用.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');
    }
});

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

演示

4

4 回答 4

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

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

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

为了使您的 if 案例工作，您需要使用 getter from attr：

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

如果btn是按钮上的唯一类，这仅适用于蝙蝠。不过，我推荐我的方法。

于 2013-09-13T08:40:08.450 回答
2

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

  1. 添加类 btn（总是）
  2. 问有没有btn课
  3. 总是发现有 btn 类（因为您在步骤 1 中单击后立即添加了它）。

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

于 2013-09-13T08:42:20.817 回答
1

尝试这个，

$('.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/

于 2013-09-13T08:38:53.857 回答
0

你的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像其他伙伴指出的那样使用。

于 2013-09-13T08:40:34.723 回答