Javascript 如何检查其他divs类属性？

我正在尝试制作简单的图片

到现在为止，我已经成功地添加/删除了存储在数组中的div元素上的活动类

我的问题是，每当我在特定的div中添加或删除类（选中该div）时，其他类都会保持不变，直到函数出现在同一个div中

我不知道如何在函数indexPlus触发时检查其他divs类。我在考虑for循环中的一些内容：

    for (var i = 0; i < pictures.length; i++) {
           //here should be the code that checks other "inactive (divs that have class
           //"picture active" but do not have the the same index as the selected
           // picture)" divs
        }

目前，我的代码工作正常，但不是我所希望的那样。我连续两天在谷歌上搜索，试图让这一切顺利进行。也许我被错误的方向迷住了，没有用一种合乎逻辑的方式思考，我是JS的一个彻头彻尾的傻瓜。请随意更正我的代码和/或使其更高效。对不起，我的英语不是我的第一语言。谢谢你的时间和回答

以下是我的滑块HTML代码：

<div class="slider">
                    <div class="kontrola back">
                        <i class="fa fa-angle-left"></i>
                    </div>
                    <div class="picture" id="0" style="background-image: urlsomeUrl)">
                    </div>
                    <div class="picture" id="1" style="background-image: url(someUrl)">
                    </div>
                    <div class="picture" id="2" style="background-image: url(someUrl)">
                    </div>
                    <div class="picture" id="3" style="background-image: url(someUrl)">
                    </div>
                    <div class="picture" id="4" style="background-image: url(someUrl)">
                    </div>
                    <div class="kontrola next">
                        <i class="fa fa-angle-right"></i>
                    </div>
                </div>

和我的JavaScript代码：

var back = document.getElementsByClassName('back')[0];
var next = document.getElementsByClassName('next')[0];


var picturesArray = []; //creating array of pictures


//populating array by getting ids
for (var i = 0; i < 5; i++) {
    picturesArray[i] = document.getElementById(i);
}

//setting the first picture
var index = 0;
var firstPicture = document.getElementById(index);
var class2 = firstPicture.className;
if(class2 == class2) {
    firstPicture.className += " active";
} else {
    firstPicture.className -= " active";
}

//function that executes on click of next button
function indexPlus() {

    if (index >= picturesArray.length - 1) { //this resets the index
        index = 0; //this resets the index
        var activePicture = document.getElementById(index);
        var class1 = activePicture.className;
            if(class1 == "picture active") { //this checks class of the active picture
                activePicture.classList.remove("active"); //this removes active class
            } else {
                activePicture.className += " active"; //this adds active class
            }
    } else {
        index++;
        var activePicture = document.getElementById(index);
        var class1 = activePicture.className;       
            if(class1 == "picture active") {
                activePicture.classList.remove("active");
            } else {
                activePicture.className += " active";
            }
    }

    //before mentioned possible for loop
    for (var i = 0; i < picturesArray.length; i++) {
        //code...
    }

}

//function that executes on click of back button
function indexMinus() { 

}

//event listeners
back.addEventListener('click', indexMinus);
next.addEventListener('click', indexPlus);

---

我通过创建另一个名为inactivePictures的数组解决了我的问题，该数组包含除活动索引以外的所有内容的图片数组

function indexPlus() {
    //added code
    var inactivePictures = [];
    var notIndex = [0,1,2,3,4];
    var notIndex1 = notIndex.splice(index, 1);

    for (var i = 0; i < picturesArray.length; i++) {
    inactivePictures[i] = document.getElementById(notIndex1);
} 


    if (index >= picturesArray.length - 1) { //this resets the index
        index = 0; //this resets the index
        var activePicture = document.getElementById(index);
        var class1 = activePicture.className;
            if(class1 == "picture active") { //this checks class of the active picture
                activePicture.classList.remove("active"); //this removes active class
            } else {
                activePicture.className += " active"; //this adds active class
            }
    } else {
        index++;
        var activePicture = document.getElementById(index);
        var class1 = activePicture.className;       
            if(class1 == "picture active") {
                activePicture.classList.remove("active");
            } else {
                activePicture.className += " active";
            }
    }
    //added code
    for (var i = 0; i < picturesArray.length; i++) {
        if(activePicture.className == inactivePictures[i].className) {
            inactivePictures[i].classList.remove("active");
        } 
    }
}

---

我的问题现在解决了，如果有任何进一步的建议，请随时发表评论

如果您使用的是jQuery，则可以使用.hasClass、.addClass和removClass方法。@Prashanth抱歉，我不能使用jQuery。谢谢你的回答。你能做一把小提琴吗？@John谢谢你的回答！虽然它并没有直接解决我的问题，但它让我以更先进的方式思考。