如果hasClass帮助并从变量中减去

我试图做到这一点，当'.main'被点击时，它会切换它的类成为'.second'，这个新类将变成红色，但元素将已被归类为'.main'，因此，我仍然可以将其称为'.main'。之后，我希望它添加到“count”变量中，如果再次单击，则返回到“.main”类的外观，然后从“count”变量中减去！如果hasClass帮助并从变量中减去

HTML

<div class="container"> 
    <div id="box" class="main"></div> 
    <div id="box" class="main"></div> 
    <div id="box" class="main"></div> 
    <div id="box" class="main"></div> 
</div>

培训相关的CSS

.main { 
    background: #888888; 
} 
.second { 
    background: red; 
} 

#box { 
    width: 10px; 
    height: 10px; 
    border-radius: 10px; 

    margin: 1% 1%; 
    line-height: 100px; 
    text-align: center; 
}

而且，jQuery的

$(document).ready(function() { 
    var count = 0; 

    $('.main').click(function() { 
    $(this).toggleClass('second') 
    $(this).toggleClass('main') 

    if ($(this).hasClass('main')) { 
     count++; 
    } else if ($(this).hasClass('second')) { 
     count--; 
    } 
    if (count === 4) { 
     alert('Success') 
    } 
    }); 
});

所以我需要帮助，因为jQuery将不断增加的 '计数' 变量，即使“这'hasClass'.second'！

如果你认为你有一个答案在JSFIDDLE中检查它并点击一个盒子4次，如果你得到一个提示，那么'COUNT--;'不会减少

来源

2015-05-30 Ben Halford

会发生什么事，当你运行该代码？ –

，因为我刚刚编辑过，即使班级是“第二”，如果点击它，仍然会增加“数量”。 –

首先，您正在切换“.main”类。这是你的预期吗？ –

您可能需要更改这些值。

删除count变量，而是使用jQuery的长度。
请勿对ID使用相同的值。

$(document).ready(function() { 
 

 
    $('.main').click(function() { 
 
    $(this).toggleClass('second').toggleClass('main') 
 

 
    if ($('.main').length == 4) 
 
     alert('Success') 
 
    }); 
 
});

.main { 
 
    background: blue; 
 
} 
 
.second { 
 
    background: red; 
 
} 
 

 
#box1, #box2, #box3, #box4 { 
 
    width: 10px; 
 
    height: 10px; 
 
    border-radius: 10px; 
 

 
    margin: 1% 1%; 
 
    line-height: 100px; 
 
    text-align: center; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<div class="container"> 
 
    <div id="box1" class="main"></div> 
 
    <div id="box2" class="main"></div> 
 
    <div id="box3" class="main"></div> 
 
    <div id="box4" class="main"></div> 
 
</div>

来源

2015-05-30 22:16:05

谢谢，这有助于解决我目前遇到的问题，但是无论如何，使用我正在做的方式，这也会起作用。 –

是的，您可以在设定计数值后稍后切换。 –

此外，您应该**从不**使用相同的ID值超过一个元素。 –

你需要，当你切换.main类被移往从$('.main').click(function() {更新代码中删除$(this).toggleClass('main')到

$('.main').click(function() { 
    $(this).toggleClass('second') 

    if ($(this).hasClass('second')) { 
     count++; 
    } else if ($(this).hasClass('main')) { 
     count--; 
    } 
    if (count === 4) { 
     alert('Success') 
    } 
});

，它不会掉下内点击通话

并且您不能在HTML中使用相同ID的多个项目，如果该项目出现多次，则可以分配类别。见下面链接的，你怎么能有它

的jsfiddle例如一个例子小提琴：http://jsfiddle.net/ks14dnL1/4/

来源

2015-05-30 22:18:21 aharen

这仍然会增加count计数变量，即使其他if（$（this）.hasClass（'second'））{count_; } 应该从它减去！ –

@BenHalford对不起，我的坏，我看到你有你的解决方案，但我正在更新小提琴和答案作为任何人的参考寻找此:) – aharen

最后，我发现它是，而不是计数 - ;我有数++;所以我注意到了这个问题上的错误，因此我纠正了它，忘记了纠正.js文件。那个我没有注意到的其他一些错误！ –

如果hasClass帮助并从变量中减去

回答

相关问题