Question

假设我的页面上有10个红色，并且它们有相同的类别，称为“＃mys;＆＃39;。

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

我做了什么：

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

这个有效！它几乎实现了我想要的。当我单击一个元素时，它会成功变为绿色。但我必须点击两次以获得另一个红色元素才能使其变为绿色。我希望你们知道我的意思，如果你看代码。有没有人知道如何解决这个问题？

Answer 1

您可以改用.toggleClass()。试试这个：

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

CSS：

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

<强> Working Demo

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

演示：Fiddle

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
}

Example

如何切换＆＃39;单击JQuery页面上的多个元素？

5 个答案: