JS循環(huán)遍歷ul中l(wèi)i的點擊事件給選中l(wèi)i添加css樣式(示例代碼)
更新時間：2023年07月19日 09:48:28 作者：賞花賞景賞時光
對于一個ul中固定的li個數(shù)，當點擊其中一個li時，改變選中l(wèi)i的顏色；同時改變對應的另一個ul中l(wèi)i的顏色，怎么實現(xiàn)這個功能呢，下面小編給大家?guī)砹薺s循環(huán)遍歷ul中l(wèi)i的點擊事件，給給選中l(wèi)i添加css樣式，感興趣的朋友一起看看吧
推薦閱讀：
vue循環(huán)遍歷選項賦值到對應控件的實現(xiàn)方法
功能：對于一個ul中固定的li個數(shù)，當點擊其中一個li時，改變選中l(wèi)i的顏色；同時改變對應的另一個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ù)的背景色和字體顏色
// 推薦的時間
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中對應的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和當前選中的li不一樣，就要把上次選中的Li添加的類去掉，然后給當前選中的Li添加類樣式。
css部分樣式如下：
.active1{
background: #1FD823;
border: #1FD823;
}
.active2{
color: #1FD823;
}點擊實現(xiàn)效果如下：
到此這篇關于js循環(huán)遍歷ul中l(wèi)i的點擊事件，給給選中l(wèi)i添加css的文章就介紹到這了,更多相關js循環(huán)遍歷li添加css內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
javascript實現(xiàn)粘貼qq截圖功能（clipboardData）
這篇文章主要介紹了javascript實現(xiàn)粘貼qq截圖功能，利用clipboardData在網(wǎng)頁中實現(xiàn)截屏粘貼的功能，感興趣的小伙伴們可以參考一下2016-05-05
條件表達式，是我們在coding過程中永遠躲不開的問題，也是我們騙代碼行數(shù)最方便的東西，但作為一名程序員，我們也要追求自己的“信達雅”，下面就讓我們看看以下幾種常見的條件表達場景，如何寫的漂亮！2021-05-05
這篇文章主要為大家介紹了input?獲取光標位置設置光標位置方案詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-06-06
這篇文章主要給大家介紹了關于require.js中define函數(shù)的相關資料，文中通過示例代碼介紹的非常詳細，對大家學習或者使用require.js中的define函數(shù)具有一定的參考學習價值，需要的朋友們下面來一起看看吧。2017-07-07
微信/支付寶小程序實現(xiàn)彈窗動畫縮放到某個位置的示例代碼
本文詳細介紹了如何使用HTML、CSS和JavaScript實現(xiàn)動畫函數(shù),包括參數(shù)設置和動畫過程中的狀態(tài)管理,文章還涉及了如何獲取DOM元素、設置動畫開始和結束的回調函數(shù),感興趣的朋友跟隨小編一起看看吧2024-10-10
JavaScript中的Array對象與其他編程語言中的數(shù)組一樣，是一組數(shù)據(jù)的集合。在JavaScript中，數(shù)組里面的數(shù)據(jù)可以是不同類型的，并具有用于執(zhí)行數(shù)組常見操作的方法，本文整理了一些常用的，需要的可以參考一下2022-10-10
document.getElementById的一些細節(jié)
document.getElementById的一些細節(jié)...2006-09-09
TypeScript之any類型,unknown類型,never類型使用詳解
本文介紹了TypeScript中的三種特殊類型：any、unknown和never,any類型表示沒有任何限制,unknown類型為更安全的any,never類型表示類型為空,它們的使用場景和限制各不相同,但都具有特殊的用途和優(yōu)勢2026-03-03
ECMAScript 6離我們越來越近了，作為它最重要的方言，Javascript也即將迎來語法上的重大變革，InfoQ特開設“深入淺出ES6”專欄，來看一下ES6將給我們帶來哪些新內容2016-03-03
javascript實現(xiàn)rgb顏色轉換成16進制格式
本文給大家分享的是使用javascript實現(xiàn)rgb顏色轉換成16進制格式的方法和示例代碼，有需要的小伙伴可以參考下。2015-07-07