JavaScript（JS）排他思想是在Web前端開發中一個常用的技術手段，該技術能夠實現多個元素之間的控制，通過JS代碼中的「排他」機制，能夠使得多個元素的狀態互相獨立，這樣能夠有效地控制頁面的交互效果，從而提高用戶體驗。
1. JS排他思想小案例
我們可以先來看一個JS排他思想的小例子，實現點擊多個按鈕時只有一個按鈕被選中的狀態。
// html部分
<!DOCTYPE html>
<html>
<head>
<title>JS排他思想小例子</title>
</head>
<body>
<button class="btn active">按鈕1</button>
<button class="btn">按鈕2</button>
<button class="btn">按鈕3</button>
</body>
</html>
// js部分
var btns = document.querySelectorAll(".btn");
for (var i = 0; i < btns.length; i++) {
btns[i].onclick = function() {
for (var j = 0; j < btns.length; j++) {
btns[j].classList.remove("active");
}
this.classList.add("active");
};
}
從上述代碼可以看出，我們在將選中的按鈕的class設置為「active」，同時通過遍歷所有按鈕的方式，將非當前選中按鈕的class移除「active」的狀態，這樣每次只有一個按鈕是「active」狀態。
2. JS排他思想for循環的作用
在上述例子中，我們使用了for循環來遍歷所有的按鈕，並通過循環中的變數「i」來綁定每個按鈕的點擊事件。
for (var i = 0; i < btns.length; i++) {
btns[i].onclick = function() {
for (var j = 0; j < btns.length; j++) {
btns[j].classList.remove("active");
}
this.classList.add("active");
};
}
上述代碼中的「for」循環起到了遍曆元素的作用，通過循環的方式可方便地對多個元素進行控制，同時不需要對每個元素編寫重複代碼。通過這種方式，我們可以使得頁面上所有需要控制的元素都具有相同的功能，這會讓頁面代碼更具有可維護性和可拓展性。
3. JS排他思想for的作用
在JS中，for循環功能非常強大，我們可以通過不同的循環參數控制循環的範圍和方式。
例如，在上述代碼中，我們通過for循環的方式給button元素添加了一個onclick事件，這樣當按鈕被點擊時，就會觸發事件中的邏輯代碼。
另外，我們還可以使用for循環來遍曆數組或對象：
// 遍曆數組
var arr = ["apple", "banana", "orange"];
for (var i = 0; i < arr.length; i++) {
console.log(arr[i]);
}
// 遍歷對象
var obj = {name: "John", age: 30, city: "New York"};
for (var key in obj) {
console.log(key + ": " + obj[key]);
}
通過for循環遍曆數組或對象是JS中常用的語法之一，它可以方便地遍曆數據並進行處理。
4. JS排他思想的一般實現步驟
實現JS排他思想通常需要經歷幾個步驟：
1）獲取元素
使用JS獲取需要控制的元素，例如使用document.querySelector()或document.querySelectorAll()方法獲取元素，綁定click事件等操作。
2）遍曆元素
使用for循環或forEach()方法遍歷需要控制的元素，確保能夠對每個元素進行控制，同時保證元素之間的狀態互相獨立。
3）添加控制邏輯
通過if語句、classList等方法控制元素的狀態，確保每個元素只有一個處於選中狀態，同時其他元素處於非選中狀態。
4）添加樣式
通過CSS樣式表控制元素的樣式，例如選中元素的樣式和非選中元素的樣式有所不同，可以使用class或者直接設置元素的style屬性。
5. JS排它思想選取3~5個與JS排他思想相關的做為小標題
小標題1：JS排他思想的優點
1）減少代碼量：JS排他思想通過循環遍曆元素的方式，可以將相同的功能應用於多個元素上，使得頁面代碼更加簡潔。
2）提高可維護性：使用JS排他思想可以讓元素的狀態互相獨立，從而減少出現錯誤的可能性，同時也方便代碼後期的維護。
3）增強用戶體驗：通過JS排他思想控制頁面的交互效果，能夠增強用戶對網站的使用體驗，同時提高網站的良好口碑。
小標題2：JS排他思想與事件綁定
JS排他思想通常與事件綁定相結合，例如在按鈕點擊事件中添加JS排他邏輯，可以控制只有一個按鈕被選中，從而實現多選框的效果。
var checkboxes = document.querySelectorAll("input[type=checkbox]");
for (var i = 0; i < checkboxes.length; i++) {
checkboxes[i].onclick = function() {
for (var j = 0; j < checkboxes.length; j++) {
checkboxes[j].checked = false;
}
this.checked = true;
};
}
在上述代碼中，我們通過JS實現了input複選框的單選功能，當點擊某個checkbox時，其他checkbox的checked狀態都會被取消，只剩下當前選中項被選中的狀態。
小標題3：JS排他思想與CSS樣式控制
JS排他思想也可以通過控制CSS樣式來控制頁面元素的狀態。
例如，在以下代碼中，我們為tab欄按鈕添加了CSS樣式，其中.active樣式表示被選中的按鈕狀態。
// html部分
<!DOCTYPE html>
<html>
<head>
<title>JS排他思想示例</title>
<style>
.tab-btn {
cursor: pointer;
color: #333;
background-color: #ddd;
padding: 5px 10px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
border: none;
}
.tab-btn.active {
background-color: #0af;
color: #fff;
}
</style>
</head>
<body>
<button class="tab-btn active">按鈕1</button>
<button class="tab-btn">按鈕2</button>
<button class="tab-btn">按鈕3</button>
</body>
</html>
// js部分
var btns = document.querySelectorAll(".tab-btn");
for (var i = 0; i < btns.length; i++) {
btns[i].onclick = function() {
for (var j = 0; j < btns.length; j++) {
btns[j].classList.remove("active");
}
this.classList.add("active");
};
}
通過JS的控制，每次只有一個tab欄按鈕被選中，同時其餘按鈕被設為非選中狀態，其中.active樣式用於控制選中和非選中狀態的樣式。
小標題4：JS排他思想實戰應用
JS排他思想在Web前端開發中有著廣泛的應用，例如實現輪播圖切換、選項卡切換等交互效果，同時也可以用於優化網站的UI交互。
例如，在以下代碼中，我們使用JS排他思想來實現一個輪播圖效果。
// html部分
<!DOCTYPE html>
<html>
<head>
<title>JS排他思想應用：輪播圖示例</title>
<style>
.slide {
overflow: hidden;
}
.slide .container {
display: flex;
transition: transform .3s;
}
.slide .container > div {
flex: 0 0 100%;
height: 300px;
}
.slide .indicators {
display: flex;
justify-content: center;
margin-top: 20px;
}
.slide .indicator {
cursor: pointer;
background-color: #ddd;
width: 10px;
height: 10px;
border-radius: 10px;
margin-right: 10px;
transition: background-color .3s;
}
.slide .indicator.active {
background-color: #0af;
}
</style>
</head>
<body>
<div class="slide">
<div class="container">
<div style="background-color: #f00;">slide1</div>
<div style="background-color: #0f0;">slide2</div>
<div style="background-color: #00f;">slide3</div>
</div>
<div class="indicators">
<div class="indicator active"></div>
<div class="indicator"></div>
<div class="indicator"></div>
</div>
</div>
<script type="text/javascript">
var container = document.querySelector(".container");
var slides = document.querySelectorAll(".container > div");
var indicators = document.querySelectorAll(".indicator");
var currentIndex = 0;
var timer = null;
var duration = 3000;
// 設置容器寬度
container.style.width = slides.length * 100 + "%";
// 設置每個滑塊的寬度
for (var i = 0; i < slides.length; i++) {
slides[i].style.width = 100 / slides.length + "%";
}
// 綁定指示器
for (var i = 0; i < indicators.length; i++) {
indicators[i].onclick = function() {
var index = [].indexOf.call(indicators, this);
goTo(index);
clearInterval(timer);
timer = setInterval(next, duration);
};
}
// 跳轉到相應的滑塊
function goTo(index) {
if (index slides.length - 1 || index === currentIndex) {
return;
}
var offset = -100 * index / slides.length;
container.style.transform = "translateX(" + offset + "%)";
indicators[currentIndex].classList.remove("active");
indicators[index].classList.add("active");
currentIndex = index;
}
// 持續滑動
function next() {
var index = (currentIndex + 1) % slides.length;
goTo(index);
}
timer = setInterval(next, duration);
</script>
</body>
</html>
在以上代碼中，我們通過JS排他思想來控制輪
原創文章，作者：小藍，如若轉載，請註明出處：https://www.506064.com/zh-tw/n/286860.html
微信掃一掃 
支付寶掃一掃 