我想將一組元素的類更改為其他類。元素的當前類都是不同的，我想將其當前類更改為的類也是如此。
目前，我最好的想法是檢查元素的當前類，然后根據它的類更改它，對我需要更改的元素數量重復此操作。例如，如果我想將類 'a' 的所有元素更改為類 'z' 和 'b' 到 'y' 等，我會這樣做：
var classes = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i' , 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z'];
var classes_product = ['z', 'y', 'x', 'w', 'v', 'u', 't', 's', 'r', 'q', 'p', 'o', 'n', 'm', 'l', 'k', 'j', 'i', 'h', 'g', 'f', 'e', 'd', 'c', 'b', 'a'];
for (let i = 0; i < classes.length; i ) {
var x = document.getElementsByClassName(classes[i]);
for (let j = 0; j < x.length; j ) {
x[j].className = classes_product[i];
}
}
我試圖自己解決這個問題，但我能找到的只是使用“.className”更改類的能力。我真的很感激另一種不需要那么多輸入的方法，因為我需要對我的一些功能進行相當多的更改才能作業。
uj5u.com熱心網友回復：
您當前的代碼有問題。
getElementsByClassName回傳一個實時集合。如果在迭代集合時從元素中洗掉類，則集合的元素將向下移動；您當前的實作將跳過一些元素。- 由于某些所得到的類都是一樣的初始類，改變，例如
a以z意志，在回圈結束時，改變那些回a。
雖然您可以預先構建所有匹配元素的集合，然后迭代它們，這有助于將類映射到它們的結果......
const classTransformations = {
a: 'z',
b: 'y',
c: 'x',
// ...
};
Object.entries(classTransformations)
.map(([initial, final]) => ({ elements: document.querySelectorAll('.' initial), final }))
.forEach(({ elements, final }) => {
for (const elm of elements) elm.classList = final;
});
最好退后一步，考慮一下更改所有這些類的目的是什么，以及是否有一種 DRY-er 方法可以這樣做。
如果，如您的原始代碼所示，您只需要在兩種狀態之間切換，您可以在單個父元素上切換單個類，并適當地更改 CSS 規則，例如，.parent .a導致初始a類的規則, 并.parent.toggled .a導致切換z類的規則。
uj5u.com熱心網友回復：
var classes = ['a', 'b', 'c', 'd'];
var classes_product = ['d', 'c', 'b', 'a'];
classes.forEach(function (item) {
var x = document.getElementsByClassName(item);
for (let j = 0; j < x.length; j ) {
const element = x[j];
element.classList.add(classes_product[j]);
element.classList.remove(item);
}
});.a {
color: red;
}
.b {
color: blue;
}
.c {
color: green;
}
.d {
color: grey;
}<div>
<div class="a">A</div>
<div class="b">B</div>
<div class="c">C</div>
<div class="d">D</div>
</div>轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/396706.html
標籤：javascript html css