如何在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
}

例