js迴圈遍歷ul中li的點選事件,給給選中li新增css
阿新 • • 發佈:2018-12-26
功能:對於一個ul中固定的li個數,當點選其中一個li時,改變選中li的顏色;同時改變對應的另一個ul中li的顏色
頁面初始化的介面:
HTML:
<div > <label>其他推薦:</label> <ul> <li class="other_recommend" id="recommend1">10:21</li> <li class="other_recommend" id="recommend2">10:22</li> <li class="other_recommend" id="recommend3">10:25</li> <li class="other_recommend" id="recommend4">10:28</li> <li class="other_recommend" id="recommend5">10:30</li> </ul> </div> <br /> <div> <label>剩餘紅包數:</label> <ul> <li id="num1" class="number">200</li> <li id="num2" class="number">150</li> <li id="num3" class="number">100</li> <li id="num4" class="number">50</li> <li id="num5" class="number">20</li> </ul> </div>
在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')) { time.removeClass('active1'); } } for (var i = 0; i < nums.length; i++) { var n = nums[i]; if (n.hasClass('active2')) { n.removeClass('active2'); } } //原來是沒有被選中的狀態 selectedTime.addClass('active1'); num.addClass('active2'); } }
1、 定義times和nums陣列,分別存放兩個ul的li;
2、給第一個ul中的每一個li定義點選事件:
3、定義點選觸發事件所實現的功能函式:給選中的li新增樣式類$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); });
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')) {
time.removeClass('active1');
}
}
for (var i = 0; i < nums.length; i++) {
var n = nums[i];
if (n.hasClass('active2')) {
n.removeClass('active2');
}
}
//原來是沒有被選中的狀態
selectedTime.addClass('active1');
num.addClass('active2');
}
}
setSelectedTime()函式用來新增選中Li的樣式,其中在函式裡面用到for迴圈來實現遍歷上次選中的Li,如果上次選中的li和當前選中的li不一樣,就要把上次選中的Li新增的類去掉,然後給當前選中的Li新增類樣式。
css部分樣式如下:
.active1{
background: #1FD823;
border: #1FD823;
}
.active2{
color: #1FD823;
}
點選實現效果如下: