Question

我有10个div中的白色文字，一旦用户点击它们就会变成蓝色，并且选择＆＃34;＆＃34; divs是5.我这样做了：

<div id="sen1" class="sentences">Text1</div>
<div id="sen2" class="sentences">Text2</div>        
<div id="sen3" class="sentences">Text1</div>
<div id="sen4" class="sentences">Text2</div>        
...

$(".sentences").click(function() {
    count++
    $(this).css("color", "blue")
    selected_true.push($(this).text())
    if (count == 5){
        $(".sentences").off("click")
        //go to next page
    }
});

现在，如果再次单击蓝色文本并希望将count变量减一，我希望文本再次变为白色。理想情况下，我希望每次选择一个句子时都增加计数器，一旦取消选择就再次减少计数器。我想过toggle但是如何在toggle方法中加入计数器？

Answer 1

这样做可能更有意义：

CSS

.sentences {
   color: #fff;
}
.sentences.turnedon { 
   color: blue;
}

的javascript

$(".sentences").click(function() {

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

       $(this).removeClass('turnedon');
       count-1;

    } else {

       $(this).addClass('turnedon');
       count++;
   }

Answer 2

更好的方法是为每个单击的div添加一个类，并在再次单击它时将其删除。

使用JQuery toggleClass在一个简单的行中完成它：

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

然后你可以像这样计算所选的div：

$('.selected').length;

Answer 3

您可以使用2个类来完成。如果您有2个样式类，则可以使用。

 $('yourSeletor').toggleClass('yourClassBlue');

请参阅此示例：http://api.jquery.com/toggleclass

每次单击Jquery更改单词颜色和计数器

3 个答案: