Question

我正在尝试制作简单的JS滑块图片。

到目前为止，我设法在存储在数组中的div元素上添加/删除类“active”。

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

每当函数“indexPlus”触发时，我不知道如何检查其他div类。我正在考虑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);

Answer 1

我通过创建另一个名为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");
        } 
    }
}

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

如何查看其他div类属性？

1 个答案: