Question

我在4种颜色类之间切换时遇到问题。每次使用此功能时我都会尝试更改颜色。

function changeBackground() {
    var all = getSelected();

    var blue = document.getElementsByClassName("blue");
    for (var i = 0; i < all.length; i++) {
        all[i].classList.add("green");
        all[i].classList.remove("blue");
    }

    var red = document.getElementsByClassName("red");
    for (var i = 0; i < red.length; i++) {
        all[i].classList.add("blue");
        all[i].classList.remove("red");
    }

    var yellow = document.getElementsByClassName("yellow");
    for (var i = 0; i < yellow.length; i++) {
        all[i].classList.add("red");
        all[i].classList.remove("yellow");
    }

    for (var i = 0; i < all.length; i++) {
        all[i].classList.add("yellow");
        all[i].classList.remove("green");

    }
}

getSelected返回document.getElementsByClassName("selected"); 并确保只有被选中的div才会改变背景。

Html看起来像这样：<div id="box1" class="box center green size200"></div>

效果很好，直到蓝色 - >绿色，并且不会删除这些课程。我该如何解决这个问题？

Answer 1

Please check this https://jsfiddle.net/maflorezp/1u3xjxaq/1/

You have some errors walking the elements and you need validate class before change

function changeBackground() {
    var all = getSelected();

    for (var i = 0; i < all.length; i++) {
        var color = all[i].classList;
        if(color.contains("blue")){
          all[i].classList.add("green");
          all[i].classList.remove("blue");
        } else if(color.contains("red")){
          all[i].classList.add("blue");
          all[i].classList.remove("red");
        } else if(color.contains("yellow")){
          all[i].classList.add("red");
          all[i].classList.remove("yellow");
        } else if(color.contains("green")){
          all[i].classList.add("yellow");
          all[i].classList.remove("green");
        }        
    }
}

Answer 2

我发现您的代码存在一些问题：

1-您循环显示每种颜色的所有框。你应该替换

for (var i = 0; i < blue.length; i++) {
    all[i].classList.add("green");
    all[i].classList.remove("blue");
}

通过

for (var i = 0; i < blue.length; i++) {
    blue[i].classList.add("green");
    blue[i].classList.remove("blue");
}

2-您应该在进行任何修改之前选择所有div，以确保在启动该功能之前只选择那种颜色。

var blue = document.getElementsByClassName("blue");
var red = document.getElementsByClassName("red");
var yellow = document.getElementsByClassName("yellow");
var green = document.getElementsByClassName("green");

3-您当前使用getSelected获取所有选定的div，但随后在文档的每个元素上运行代码。

我认为不是使用4个循环，而是应该只为all的每个元素创建一个并检查类，它会解决很多问题。类似的东西：

function changeBackground() {
    var all = getSelected();

    for (var i = 0; i < all.length; i++) {
        var colorBlue = all[i].classList.contains("blue")
        var colorRed = all[i].classList.contains("red")
        var colorGreen = all[i].classList.contains("greed")
        var colorYellow = all[i].classList.contains("yellow")
        if(colorBlue){
           all[i].classList.add("green");
           all[i].classList.remove("blue"); 
        }
        //check other colors here the same way
    }
}

使用javascript在div上切换多个css类

2 个答案: