How to 'toggle' click multiple elements on page in JQuery?

Question

Lets say I have 10 with red color on my page, and they have same class which is called 'myspan'.

Here is what I want: Click an element, and then the clicked one change its color to green.

what I did:

<script>
    $(document).ready(function(){
        $('.myspan').click(function(){
            aaa = !aaa;
            if(aaa){
                $(this).css('color','green');
            } else {
                $(this).css('color','red');         
}
    });
})
</script>

This works! It almost achieve what I want. When I click one element, it changes to green successfully. But I have to click twice for another red element to make it green. I hope you guys know what I mean if you watch the code. Does anyone have any idea about how to solve the problem?

Answer 1

You can use .toggleClass() instead.Try this:

 $(".myspan").click(function () {
  $(this).toggleClass("red");
 });

CSS:

 .myspan{ color: green; }
 .myspan.red{ color: red; }

Working Demo

Answer 2

You need to have a state for each span separately so instead of using a common variable you can use the .data() api like

$(document).ready(function () {
    $('.myspan').click(function () {
        var $this = $(this),
            aaa = $this.data('aaa');
        aaa = !aaa;
        $this.css('color', function () {
            return aaa ? 'green' : 'red';
        })
        $this.data('aaa', aaa);
    });
})

Demo: Fiddle

Answer 3

I would not use any variable, as long as your script's function is going to say that simple. Better try it like this:

Javascript:

$(document).ready(function () {
    $('.myspan').click(function () {
        if ($(this).hasClass('color-red')) {
            $(this).removeClass('color-red').addClass('color-green');
        } else {
            $(this).removeClass('color-green').addClass('color-red');
        }
    });
})

CSS:

.myspan {
}
.color-red {
    color:red;
}
.color-green {
    color:green;
}

Working Fiddle: http://jsfiddle.net/2729p/

This saves the need to use a state saving variable and makes it more modular.

Answer 4

Try below code

<script>
    $(document).ready(function(){
        $('.myspan').click(function(){
            var colorVal = $(this).css('color');
            if(colorVal === 'red'){
                $(this).css('color','green');
            } else {
                $(this).css('color','red');         
}
    });
})
</script>

Answer 5

You would be better off using toggleClass

<span class="myspan">Test</span>

JQuery:

$('.myspan').click(function () {
    $(this).toggleClass("green");
});

CSS:

.myspan{
    color: red;
}
.green {
    color: green
}

Example