快捷導(dǎo)航

JS循環(huán)遍歷ul中l(wèi)i的點擊事件給選中l(wèi)i添加css樣式(示例代碼)

更新時間：2023年07月19日 09:48:28 作者：賞花賞景賞時光

對于一個ul中固定的li個數(shù)，當(dāng)點擊其中一個li時，改變選中l(wèi)i的顏色；同時改變對應(yīng)的另一個ul中l(wèi)i的顏色，怎么實現(xiàn)這個功能呢，下面小編給大家?guī)砹薺s循環(huán)遍歷ul中l(wèi)i的點擊事件，給給選中l(wèi)i添加css樣式，感興趣的朋友一起看看吧

推薦閱讀：

vue循環(huán)遍歷選項賦值到對應(yīng)控件的實現(xiàn)方法

JavaScript循環(huán)遍歷你會用哪些之小結(jié)篇

功能：對于一個ul中固定的li個數(shù)，當(dāng)點擊其中一個li時，改變選中l(wèi)i的顏色；同時改變對應(yīng)的另一個ul中l(wèi)i的顏色

頁面初始化的界面：

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>剩余紅包數(shù):</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點擊事件，改變選中l(wèi)i的樣式（代碼用jquery寫的）：

// 設(shè)置選中的推薦的時間和紅包數(shù)的背景色和字體顏色
	// 推薦的時間
	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{
			//遍歷數(shù)組把，其他的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');
				}
			}
		      //原來是沒有被選中的狀態(tài)
			selectedTime.addClass('active1');
			num.addClass('active2');
		}
	}

思路如下：

1、定義times和nums數(shù)組，分別存放兩個ul的li；

2、給第一個ul中的每一個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);
	});

3、定義點擊觸發(fā)事件所實現(xiàn)的功能函數(shù)：給選中的li添加樣式類

selectedTime表示第一個ul中的某個li的id，num表示第二個ul中對應(yīng)的li的id

       function setSelectedTime(selectedTime,num){
		if (selectedTime.hasClass('active1')){
		}else{
			//遍歷數(shù)組把，其他的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');
				}
			}
		//原來是沒有被選中的狀態(tài)
			selectedTime.addClass('active1');
			num.addClass('active2');
		}
	 }

setSelectedTime（）函數(shù)用來添加選中Li的樣式，其中在函數(shù)里面用到for循環(huán)來實現(xiàn)遍歷上次選中的Li,如果上次選中的li和當(dāng)前選中的li不一樣，就要把上次選中的Li添加的類去掉，然后給當(dāng)前選中的Li添加類樣式。

css部分樣式如下：

 
.active1{
    background: #1FD823;
    border:  #1FD823;
}
.active2{
    color: #1FD823;
}

點擊實現(xiàn)效果如下：

到此這篇關(guān)于js循環(huán)遍歷ul中l(wèi)i的點擊事件，給給選中l(wèi)i添加css的文章就介紹到這了,更多相關(guān)js循環(huán)遍歷li添加css內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: