如何在JQuery中“切换”单击页面上的多个元素？

Question

假设我的页面上有10个红色，并且它们具有相同的类，称为“ myspan”。

这就是我想要的：单击一个元素，然后单击的元素将其颜色更改为绿色。

我做了什么：

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

这可行！ 它几乎达到了我想要的。 当我单击一个元素时，它成功变为绿色。 但是我必须单击两次以使另一个红色元素变为绿色。 我希望你们都明白，如果您观看代码，我的意思是。 有人对解决问题有任何想法吗？

Answer 1

您可以改用.toggleClass() 。 .toggleClass() ：

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

CSS：

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

工作演示

Answer 2

您需要分别为每个跨度提供一个状态，因此可以使用.data（）api来代替使用公共变量，例如

$(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);
    });
})

演示： 小提琴

Answer 3

只要您的脚本功能这么简单，我就不会使用任何变量。 最好这样尝试：

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;
}

工作小提琴： http : //jsfiddle.net/2729p/

这省去了使用状态保存变量的需要，并使它更具模块化。

Answer 4

试试下面的代码

<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

您最好使用toggleClass

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

jQuery的：

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

CSS：

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

例