如何查看其他div類的屬性？

Question

我想製作簡單的JS滑塊的圖片。

現在我設法添加/刪除存儲在數組中的div元素上的「active」類。

我的問題是，無論何時添加或刪除特定的div中選擇的類，其他人保持不變，直到函數繞同一個div。

無論函數「indexPlus」何時觸發，我都不知道如何檢查其他div類。我想到的東西線的循環：

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

我的問題是現在解決了，如果任何人有任何進一步的建議，請隨時發表評論！