今天來一個關于點擊li獲取對應的index的demo，內有詳解和避坑指南，請安心食用，今日也是干貨滿滿的一天
靈感來源是H5考試的一道題目，大概是這樣的要求：
今天就來做一個類似的demo，“手把手”教會你怎么獲取點擊的li的值，媽媽再也不用擔心我獲取不到值啦~
圖片有點不清晰 大家將就看
這是導航條
- 1.思路
- 2.代碼
- 1.html
- 2.css
- 3.js
- 1.難點
- 方法1.給每一個li設定index
- 方法2.使用jquery
- 方法3.使用ES6的 let塊級作用域
- 2.稍微復雜一點的方法
- 方法4.使用閉包和立即執行函式()()
- 方法5.使用bind()改變this指向每一條li，并傳參i
- 方法6.forEach
- 3.完整代碼
1.思路
道理其實很簡單，就是每個ul里有很多li，每個li又對應了一張圖片或者一個div，所有每個li和圖片的數量和順序是相同的，我們可以通過js獲取到當前點擊的li是第幾個的話，就可以通過這個index來獲取到li所對應的圖片或者div
那么改變li和圖片樣式的，就是死記硬背的改變css樣式的代碼的事了（獲取后改變class或者style）
我們設定一個class叫current，記住它是獨一無二的，哪個li被點擊了，就把這個獨一無二的class給誰，
既然是獨一無二的class，在給li之前肯定要先給它來一個莊重的授權儀式，咳咳，不是
是先把所有的li的class樣式先清空，避免有其他的li也私藏了current這個class的情況，所有搜身清空完畢后，再把獨一無二的class=“current”給到點擊的li，這樣就完成了li的點擊樣式改變，
img的樣式直接用display：block顯示/none隱藏 來控制就好，將獲取到的index拿去匹配所有的imgs，就可以適合li的小妾啦，適合li的圖片了
li和img的樣式都用到的是排他的思想，用多了自然就熟悉了，感覺很難，理解了原理和邏輯就可以手到擒來啦
2.代碼
今天使用的工具依然是Vscode，和preview on live server的插件 可以移步到這兒看詳細介紹
1.html
<div class="container">
<ul>
<li class="current">熊貓1號</li>
<li>熊貓2號</li>
<li>熊貓3號</li>
<li>小狗1號</li>
</ul>
<div class="imgs">
<img src="./images/panda1.jpg" alt="1" style="display: block;">
<img src="./images/panda2.jpg" alt="2">
<img src="./images/panda3.jpg" alt="3">
<img src="./images/dog3.jpg" alt="4">
</div>
</div>
2.css
樣式的話，我們給container設定合適的寬度，再利用父相子絕的技巧（父元素相對定位，子元素絕對定位），圖片也使用絕對定位，就不會拍列起來了，而是重疊的放置在同一個位置，
再用到一個盒子垂直居中的方法，將盒子定位在body的中央，由于默認的body標簽的寬是瀏覽器一樣寬，但是高度是由內容撐開的，我們就暫且給body手動設定一個高度，
不要忘記設定一個獨一無二的名為current的class（命名為啥都OK，只要人知道它是獨一無二的就好），這個里設定好當li被點擊到要變成的樣式，我這兒改變了背景顏色和字體顏色
* {
margin: 0;
padding: 0;
list-style: none;
}
body {
height: 800px;
/*垂直水平居中方法2.*/
display: flex;
justify-content: center;
align-items: center;
}
.container {
width: 300px;
height: 200px;
/*父相子絕，使子元素不超出父元素，而導致溢位*/
position: relative;
/*整個盒子垂直居中顯示*/
/*方法1.*/
/* left: 50%;
top: 50%;
margin-left: -150px;
margin-top: -100px; */
}
.container ul {
width: 30%;
height: 100%;
position: absolute;
}
li {
height: 50px;
line-height: 50px;
text-align: center;
background-color: rgba(49, 146, 92, 0.795);
/*透明度，整個元素都透明*/
opacity: 0.8;
}
.current {
background-color: rgb(31, 109, 64);
color: white;
cursor: pointer;
}
img {
/*先將所有的圖片隱藏起來，在行內元素設定單獨的圖片為block 顯示一張圖片*/
display: none;
width: 100%;
height: 100%;
}
.container .imgs {
position: absolute;
height: 100%;
width: 70%;
left: 30%;
}
3.js
基礎設定，獲取元素
var lis = document.querySelectorAll("li"); //獲取到所有的小li
var imgs = document.querySelectorAll("img"); //獲取到所有的圖片
//lis和imgs獲取到的是偽陣列，可以使用陣列的一些方法，但不是真正的陣列
1.難點
邏輯很簡單，就是獲取點擊到的li對應的index，但是由于在js中，事件是異步事件，并且計算機執行的速度非常快，所有會導致不能直接在click事件或其他事件中獲取到li的index，做個演示
var lis = document.querySelectorAll("li"); //獲取到所有的小li
var imgs = document.querySelectorAll("img"); //獲取到所有的圖片
//lis和imgs獲取到的是偽陣列，可以使用陣列的一些方法，但不是真正的陣列
//1.回圈遍歷，并且判斷是哪個li被點擊了
//2.先將所有的li和img的樣式清空，再進行點擊所對應的元素的樣式設定（排他思想）
for (var i = 0; i < lis.length; i++) {
lis[i].onclick = function(i) {
//這樣是沒有辦法獲得點擊li的對應的index，因為事件是異步的，獲取到的i已經是回圈完畢后的i了，也就是此時的i已經變成了4
//不能獲取到對應的i，就不能改變相應的樣式
console.log(i); //4,4,4,4
}
}
不管我點擊哪個li，輸出的i都為4
方法1.給每一個li設定index
for (var i = 0; i < lis.length; i++) {
lis[i].index = i;
//或者使用setAttribute()也可以
//lis[i].setAttribute("index",i)
//用lis[i].getAttribute(index)獲取值
lis[i].onclick = function(i) {
console.log(this.index);
for (var i = 0; i < lis.length; i++) {
lis[i].className = ""; //清空li樣式
imgs[i].style.display = "none"; //清空img
}
//給點擊的li和對應的img設定樣式
this.className = "current";
imgs[this.index].style.display = "block"
}
}
方法2.使用jquery
前提是引入jquery
$("ul li").click(function() {
//獲取到點擊的li的index
var index = $(this).index();
//先給點擊到的li的class樣式設定為current
//再將點擊到的li的其他兄弟節點的current的class演示移除（排他思想）
//siblings（）獲取所有的兄弟節點
$(this).addClass("current");
$(this).siblings().removeClass("current");
//先給點擊到的li對應的圖片設定為顯示
//再將點擊到的li的其他兄弟節點的圖片設定為隱藏
//siblings（）獲取所有的兄弟節點 eq（）匹配為index的元素
$(".imgs img").eq(index).css("display", "block")
$(".imgs img").eq(index).siblings().css("display", "none")
})
方法3.使用ES6的 let塊級作用域
for (let i = 0; i < lis.length; i++) {
lis[i].onclick = function() {
console.log(i);
for (let i = 0; i < lis.length; i++) {
lis[i].className = ""; //清空li樣式
imgs[i].style.display = "none"; //清空img
}
//給點擊的li和對應的img設定樣式
this.className = "current";
imgs[i].style.display = "block"
}
}
2.稍微復雜一點的方法
方法4.使用閉包和立即執行函式()()
for (var i = 0; i < lis.length; i++) {
lis[i].onclick = (
function(index) {
return function() {
console.log(i);
for (var i = 0; i < lis.length; i++) {
lis[i].className = ""; //清空li樣式
imgs[i].style.display = "none"; //清空img
}
//給點擊的li和對應的img設定樣式
this.className = "current";
imgs[index].style.display = "block"
}
}
)(i)
}
方法5.使用bind()改變this指向每一條li，并傳參i
for (let i = 0; i < lis.length; i++) {
lis[i].onclick = function(index) {
console.log(i);
for (let i = 0; i < lis.length; i++) {
lis[i].className = ""; //清空li樣式
imgs[i].style.display = "none"; //清空img
}
//給點擊的li和對應的img設定樣式
this.className = "current";
imgs[index].style.display = "block"
}.bind(lis[i], i)
}
方法6.forEach
陣列的forEach方法也可以獲取index的值，但是這里獲取到的lis和imgs是偽陣列，所有不適用
3.完整代碼
這邊用的是let來獲取index，有需要的uu可以直接用哦，Jquery檔案和圖片需要自己引入，并且注意路勁是否正確，完整檔案可以評論區或者私信我
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
list-style: none;
}
body {
height: 800px;
/*垂直水平居中
方法2.*/
display: flex;
justify-content: center;
align-items: center;
}
.container {
width: 300px;
height: 200px;
/*父相子絕，使子元素不超出父元素，而導致溢位*/
position: relative;
/*整個盒子垂直居中顯示*/
/*方法1.*/
/* left: 50%;
top: 50%;
margin-left: -150px;
margin-top: -100px; */
}
.container ul {
width: 30%;
height: 100%;
position: absolute;
}
li {
height: 50px;
line-height: 50px;
text-align: center;
background-color: rgba(49, 146, 92, 0.795);
/*透明度，整個元素都透明*/
opacity: 0.8;
}
.current {
background-color: rgb(31, 109, 64);
color: white;
cursor: pointer;
}
img {
/*先將所有的圖片隱藏起來，在行內元素設定單獨的圖片為block 顯示一張圖片*/
display: none;
width: 100%;
height: 100%;
}
.container .imgs {
position: absolute;
height: 100%;
width: 70%;
left: 30%;
}
</style>
</head>
<body>
<div class="container">
<ul>
<li class="current">熊貓1號</li>
<li>熊貓2號</li>
<li>熊貓3號</li>
<li>小狗1號</li>
</ul>
<div class="imgs">
<img src="./images/panda1.jpg" alt="1" style="display: block;">
<img src="./images/panda2.jpg" alt="2">
<img src="./images/panda3.jpg" alt="3">
<img src="./images/dog3.jpg" alt="4">
</div>
</div>
</body>
<script>
window.onload = function() {
//1.使用回圈
var lis = document.querySelectorAll("li"); //獲取到所有的小li
var imgs = document.querySelectorAll("img"); //獲取到所有的圖片
//lis和imgs獲取到的是偽陣列，可以使用陣列的一些方法，但不是真正的陣列
//1.回圈遍歷，并且判斷是哪個li被點擊了
//2.先將所有的li和img的樣式清空，再進行點擊所對應的元素的樣式設定（排他思想）
//方法2. 使用ES6的let，let是塊級作用域，可以直接獲取i
for (let i = 0; i < lis.length; i++) {
lis[i].onclick = function() {
console.log(i);
for (let i = 0; i < lis.length; i++) {
lis[i].className = ""; //清空li樣式
imgs[i].style.display = "none"; //清空img
}
//給點擊的li和對應的img設定樣式
this.className = "current";
imgs[i].style.display = "block"
}
}
}
</script>
<script src="./Jquery.js"></script>
</html>
都看到（滑到）這兒，純分享，不如給個大指拇的點贊吧！！！小M.祝大家學習順利，考試順利，作業順利！歡迎評論區和私信
轉載：歡迎轉載，但未經作者同意，必須保留此段宣告；必須在文章中給出原文連接；否則必究法律責任，
勿杠，歡迎大佬糾錯
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/390381.html
標籤：其他
上一篇：HTML5期末復習
下一篇：【學習筆記】JS之事件（上）