[英]How to 'toggle' click multiple elements on page in JQuery?
Lets say I have 10 with red color on my page, and they have same class which is called 'myspan'. 假设我的页面上有10个红色,并且它们具有相同的类,称为“ 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?
有人对解决问题有任何想法吗?
You can use .toggleClass()
instead.Try this: 您可以改用
.toggleClass()
。 .toggleClass()
:
$(".myspan").click(function () {
$(this).toggleClass("red");
});
CSS: CSS:
.myspan{ color: green; }
.myspan.red{ color: red; }
You need to have a state for each span separately so instead of using a common variable you can use the .data() api like 您需要分别为每个跨度提供一个状态,因此可以使用.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);
});
})
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: 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: CSS:
.myspan {
}
.color-red {
color:red;
}
.color-green {
color:green;
}
Working Fiddle: http://jsfiddle.net/2729p/ 工作小提琴: http : //jsfiddle.net/2729p/
This saves the need to use a state saving variable and makes it more modular. 这省去了使用状态保存变量的需要,并使它更具模块化。
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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.