I want to change the classes of a group of elements into other classes. The current classes of the elements are all different and so are the classes I want to change their current classes in to.

Currently, the best idea I have is to check the current class of the element, and then change it according to its class, repeating this for the amount of elements I need to change. For example, if I wanted to change all elements with the class 'a' to the class 'z' and 'b' to 'y' etc., I would do this:

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];
    }
}

I tried to resolve this problem myself but all I could find was the ability to change the class using ".className". I would really appreciate another method that doesn't require as much typing because I need to make quite a few changes for some of my functions to work.

CodePudding user response：

Your current code is buggy.

• getElementsByClassName returns a live collection. If you remove a class from an element while iterating over the collection, the collection's elements will shift down; your current implementation will skip some elements.
• Since some of the resulting classes are the same as the initial classes, changing, eg a to z will, at the end of the loop, change those back to a.

While you could construct a collection of all matching elements in advance, then iterate over them, helped by a mapping of classes to their results...

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;
    });

It'd probably be better to take a step back and think about what changing all of these classes is intended to do, and if there's a DRY-er way to do so.

If, as your original code appears to show, you only need to toggle between two states, you could toggle a single class on a single parent element, and change your CSS rules appropriately, so that, eg .parent .a results in the rules for the initial a class, and .parent.toggled .a results in the rules for the toggled z class.

CodePudding user response：

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 >A</div>
  <div >B</div>
  <div >C</div>
  <div >D</div>
</div>