假設我有以下情況，我必須切換幾個元素的樣式并在滿足特定條件時將它們切換回來。
let div = document.querySelectorAll('div')
document.querySelector('button').addEventListener('click', function() {
div[0].classList.toggle("div1")
div[1].classList.toggle("div2")
div[2].classList.toggle("div3")
div[0].classList.toggle("new1")
div[1].classList.toggle("new2")
div[2].classList.toggle("new3")
}).div1 {
color: red;
}
.div2 {
color: green;
}
.div3 {
color: grey;
}
.new1 {
color: yellow;
background: grey
}
.new2 {
color: pink;
background: green
}
.new3 {
color: orange;
background: red
}<div class='div1'>1</div>
<div class='div2'>2</div>
<div class='div3'>3</div>
<button>Click</button>我現在正在創建幾個類并classList.toggle()用來在它們之間切換，它絕對可以作業，但是代碼看起來很龐大，我想讓我的代碼更具可讀性，對于這種情況有什么更好的解決方案。
我曾考慮在有/無特定css樣式表之間切換，但我認為它不適用于我的情況，我需要考慮覆寫問題嗎？（如果我錯了，請糾正我）。
任何人都可以建議我解決這種情況的替代和更好的解決方案，您必須為多個元素分配大量樣式，還是有一種簡單的方法？
*我知道這是一個愚蠢的例子，在這個例子中，一個可能的解決方案是使用forEach回圈并使用template literalfor className，但這只是我創建的一個最小的例子，因為堆疊溢位規則，所以請不要怪我粗略的例子。我的實際代碼包含我必須處理的更多不同的 html 標記和 css 樣式。通過將它們存盤在一個變數中并在它們之間保持切換類太麻煩和煩人了。
我的代碼看起來像這樣：
uj5u.com熱心網友回復：
所以這是我的建議：您可以使用條件樣式在一個地方更改所有內容。例子：
.a {
/* one set of styles */
}
.b .a {
/* set a different set of styles */
}
這樣，您可以有條件地在更高級別的元素（如 document.body）上設定 class b 并自動更改所有樣式。
uj5u.com熱心網友回復：
您可以在回圈中更改元素的類（假設您已預先格式化 css）。例如;
/**
* When the BUTTON with the id named 'clickMe' is click
* Select all the DIV elements
* Foreach DIV selected, if the DIV contains the 'old-class-name'; remove it.
* Add the new class name to the class-list of the selected DIV
*/
document.body.querySelector('#clickMe').addEventListener('click',()=>{
document.body.querySelectorAll('DIV').forEach((D,I)=>{
if(D.classList.contains('old-class-name')) D.classList.remove('old-class-name');
D.classList.add(`new-class-name-${I}`);
});
});// List of CSS class names.
.new-class-name-0{
color: orange;
}
.new-class-name-1{
color: green;
}
.new-class-name-2{
color: blue;
}<div class="old-class-name">Div 1</div>
<div class="old-class-name">Div 2</div>
<div class="old-class-name">Div 3</div>
<button id="clickMe">Click</button>轉載請註明出處，本文鏈接：https://www.uj5u.com/net/419457.html
標籤：
上一篇：如何在標簽內以及在JavaScript中進行OnClick作業？
下一篇：按下提交按鈕后檢索資料