html循环⾃动点击事件,js循环遍历ul中li的点击事件，给给选中
li添加css
功能：对于⼀个ul中固定的li个数，当点击其中⼀个li时，改变选中li的颜⾊；同时改变对应的另⼀个ul中li的颜⾊
页⾯初始化的界⾯：
HTML：
其他推荐:
10:21
10:22
10:25
10:28
10:30
剩余红包数:
200
150
100
50
20
在js中定义“其他事件”⾥⾯的li点击事件，改变选中li的样式(代码⽤jquery写的)：
// 设置选中的推荐的时间和红包数的背景⾊和字体颜⾊
// 推荐的时间
var $recommend1 = $("#recommend1"),$recommend2 = $("#recommend2"),$recommend3 =
$("#recommend3"),$recommend4 = $("#recommend4"),$recommend5 = $("#recommend5"),$num1 = $("#num1"),$num2 = $("#num2"),$num3 = $("#num3"),$num4 = $("#num4"),$num5 = $("#num5");
var times=new Array($recommend1,$recommend2,$recommend3,$recommend4,$recommend5);
var nums = new Array($num1,$num2,$num3,$num4,$num5);
// 添加Input选中背景⾊
$recommend1.click(function(){
setSelectedTime($recommend1,$num1);
});
$recommend2.click(function(){
setSelectedTime($recommend2,$num2);
});
$recommend3.click(function(){
setSelectedTime($recommend3,$num3);
});
$recommend4.click(function(){ setSelectedTime($recommend4,$num4); });
$recommend5.click(function(){ setSelectedTime($recommend5,$num5); });
function setSelectedTime(selectedTime,num){ if (selectedTime.hasClass('active1')){
//不处理
}else{
//遍历数组把，其他的remove
for (var i = 0; i < times.length; i++) {
var time = times[i];
if (time.hasClass('active1')) {
}
}
for (var i = 0; i < nums.length; i++) {
var n = nums[i];
if (n.hasClass('active2')) {
}
}
//原来是没有被选中的状态
selectedTime.addClass('active1');
num.addClass('active2');
}
}思路如下：
1、定义times和nums数组，分别存放两个ul的li；
2、给第⼀个ul中的每⼀个li定义点击事件：$recommend1.click(function(){ setSelectedTime($recommend1,$num1); });
$recommend2.click(function(){
setSelectedTime($recommend2,$num3);
});
$recommend4.click(function(){
setSelectedTime($recommend4,$num4);
});
$recommend5.click(function(){
setSelectedTime($recommend5,$num5);
});3、定义点击触发事件所实现的功能函数：给选中的li添加样式类html radio点击变颜
selectedTime表⽰第⼀个ul中的某个li的id，num表⽰第⼆个ul中对应的li的id
function setSelectedTime(selectedTime,num){
if (selectedTime.hasClass('active1')){
}else{
//遍历数组把，其他的remove
for (var i = 0; i < times.length; i++) {
var time = times[i];
if (time.hasClass('active1')) {
}
}
for (var i = 0; i < nums.length; i++) {
var n = nums[i];
if (n.hasClass('active2')) {
}
}
//原来是没有被选中的状态
selectedTime.addClass('active1');
num.addClass('active2');
}
}
setSelectedTime()函数⽤来添加选中Li的样式，其中在函数⾥⾯⽤到for循环来实现遍历上次选中的Li，如果上次选中的li和当前选中的li不⼀样，就要把上次选中的Li添加的类去掉，然后给当前选中的Li添加类样式。
css部分样式如下：
.active1{
background: #1FD823;
border: #1FD823;
}
.active2{
color: #1FD823;
}
点击实现效果如下：
总结
如果觉得编程之家⽹站内容还不错，欢迎将编程之家⽹站推荐给程序员好友。
本图⽂内容来源于⽹友⽹络收集整理提供，作为学习参考使⽤，版权属于原作者。⼩编个⼈号 jb51ccc
喜欢与⼈分享编程技术与⼯作经验，欢迎加⼊编程之家官⽅交流！

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。