他のdivクラスのプロパティを確認するにはどうすればよいですか？

Question

私は写真の単純なJSスライダーを作ろうとしています。

これで、配列に格納されているdiv要素にクラス「アクティブ」を追加/削除することができました。

私の問題は、選択された特定のdivでクラスを追加または削除するたびに、関数が同じdivの周りに来るまで同じものを維持するということです。

function "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 
     } 

：私は、forループの行で何かを考えています。私は2日連続してグーグルをしていて、この仕事をしようとしました。たぶん私は間違った方向に巻き込まれ、論理的な考え方ではないので、私は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"); 
     } 
    } 
} 

誰かがさらに提案をしたら、私の問題は解決しました。