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

I have white text in 10 divs that should become blue once the user clicks on them and the total number of "selected" divs is 5. I did it like this:

我有10个div中的白色文本，一旦用户点击它们就会变成蓝色，并且“selected”div的总数是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
    }
});

Now I want the text to become white again if a blue text is clicked again and want to decrease the count variable by one. So ideally I want to increase the counter each time a sentence is selected and decrease it again once it is un-selected. I thought about toggle but how would I incorporate the counter in the toggle method?

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

3 个解决方案

#1

Doing it this way might make more sense:

这样做可能更有意义：

css

CSS

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

javascript

JavaScript的

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

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

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

    } else {

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

#2

You can do it using 2 classes. If you have 2 styles classes you can use.

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

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

See this example: http://api.jquery.com/toggleclass

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

#3

A better approach would be to add a class to each clicked div and remove it when it is clicked again.

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

Use the JQuery toggleClass to get it done in one simple line:

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

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

Then you can count the selected divs like so:

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

$('.selected').length;

#1