Javascript 如何'；切换'；在JQuery中单击页面上的多个元素？

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

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

我所做的：

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

$（文档）.ready（函数（）{
$（'.myspan'）。单击（函数（）{
aaa=！aaa；
如果（aaa）{
$（this.css（'color'，'green'）；
}否则{
$（this.css（'color'，'red'）；
}
});
})

---

这管用！它几乎达到了我想要的。当我单击一个元素时，它成功地变为绿色。但我必须单击两次，以获得另一个红色元素，使其变为绿色。我希望你们知道我的意思，如果你们看代码的话。有人知道如何解决这个问题吗？

您需要为每个跨度分别设置一个状态，这样您就可以像使用.data（）api一样使用公共变量，而不是使用公共变量

---

演示：

您需要为每个跨度分别设置一个状态，这样就可以使用.data（）api，而不是使用公共变量，如

演示：

尝试下面的代码

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

$（文档）.ready（函数（）{
$（'.myspan'）。单击（函数（）{
var colorVal=$（this.css（'color'）；
如果（colorVal==‘红色’）{
$（this.css（'color'，'green'）；
}否则{
$（this.css（'color'，'red'）；
}
});
})

尝试下面的代码

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

$（文档）.ready（函数（）{
$（'.myspan'）。单击（函数（）{
var colorVal=$（this.css（'color'）；
如果（colorVal==‘红色’）{
$（this.css（'color'，'green'）；
}否则{
$（this.css（'color'，'red'）；
}
});
})

您可以改为使用

.toggleClass（）

。请尝试以下操作：

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

CSS:

---

您可以改为使用

.toggleClass（）

。请尝试以下操作：

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

CSS:

---

您最好使用

切换类

测试

JQuery：

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

CSS:

---

您最好使用

toggleClass

测试

JQuery：

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

CSS:

---

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

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:

工作小提琴：

---

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

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

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:

工作小提琴：

---

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

非常感谢。很好用。非常感谢。工作完美。