要素をクリックし、別のノードリストの同じインデックスを持つ異なる要素にクラスを追加する

Question

同じ画像を2セット持っています。 1はギャラリーです anotherは表示されている画像のリストです：none;対応する画像がクリックされるまで繰り返す。 （基本的に光ボックス）

例えば：私は、ギャラリー内の画像の上にループし、各IMGにも、リスナーを追加した

<ul id="gallery"> 
    <li><img class="gallery-image" src="dog"></li> 
    <li><img class="gallery-image" src="cat"></li> 
    <li><img class="gallery-image" src="rabbit"></li> 
</ul> 

<ul id="modal"> 
    <li><img class="modal-image" src="dog"></li> 
    <li><img class="modal-image" src="cat"></li> 
    <li><img class="modal-image" src="rabbit"></li> 
</ul> 

。

これらの画像は、両方のリストで同じ順序であり、document.getElementsByClassNameを使用したときに同じインデックスを持ち、ノードリストを返しました。 （galleryImage [0]とmodalImage [0]などの異なる変数名を持っています） ノードリストを使って "gallery-image"をクリックすると、対応する "modal-image"にクラスを追加できますか？ galleryImage [0]が閉じているとき、私はmodalImage [0]にクラスを追加したいと思います。

これを行う方法はありますか？取るアプローチは何ですか？

私は例を見つけて答えを得ましたが、これまでにすべての画像にインデックス番号の付いたIDが割り当てられていて、1つのファイルにすべてのjを入れて整頓し、 nodelistsと遊ぶ。誰かがその背後にある論理を理解するための答えではなく、「答え」

は事前

Answer 1

にありがとうを説明できる場合

もいただければ幸いあなたの質問はこれに沸くように私には思える：「を考えますDOM要素への参照、NodeListでそのインデックスをどのように判断できますか？ "インデックスを持つと、対応する要素を別のリストに入れるという第2の部分は単純なので、

ですから、アレイ内のアイテムのインデックスを検索するためにarray .indexOf() methodを使用することができ、または.call()を経由して、あなたがたNodeListにそのメソッドを使用することができます。

var index = Array.prototype.indexOf.call(galleryImages, elementToFind) 

... indexがインデックスされるまでのあなたが探している要素の（見つからなかった場合は-1が表示されますが、見つかった場合は-1が表示されます）。したがって、modalImages[index]は他のリストの対応する項目です。

また、ループ内のすべての画像にクリックハンドラをバインドするのではなく、1つのハンドラを含むUL要素にバインドし、そのハンドラ内でevent.targetをテストしますIMG要素だった。これは委任されたイベント処理と呼ばれ、要素のクリックイベントが含まれている要素を「バブルアップ」するので、ギャラリーIMG要素のいずれかのクリックはULのレベルで処理できます。

デモの目的で、クリックすると対応するアイテムを黄色にして（以前の選択を削除する）selectedクラスを割り当てます。

// Get references to the UL elements: 
 
var galleryContainer = document.getElementById("gallery") 
 
var modalContainer = document.getElementById("modal") 
 

 
// Get the lists of IMG elements: 
 
var galleryImages = galleryContainer.querySelectorAll(".gallery-image") 
 
var modalImages = modalContainer.querySelectorAll(".modal-image") 
 

 
// Bind click handler to gallery UL: 
 
galleryContainer.addEventListener("click", function(event) { 
 
    // If the target of the click wasn't an element we care about just return immediately 
 
    if (event.target.tagName.toLowerCase() != "img") 
 
    return 
 
    
 
    // Check for a current .selected element, and if it exists remove the class from it 
 
    var currentSelected = document.querySelector(".selected") 
 
    if (currentSelected) 
 
    currentSelected.classList.remove("selected") 
 
    
 
    // Find the index of the current IMG in the list, and use that index 
 
    // to get the corresponding item in the other list 
 
    var index = Array.prototype.indexOf.call(galleryImages, event.target) 
 
    modalImages[index].classList.add("selected") 
 
});

.selected { background-color: yellow; }

<ul id="gallery"> 
 
    <li><img class="gallery-image" src="dog" alt="dog"></li> 
 
    <li><img class="gallery-image" src="cat" alt="cat"></li> 
 
    <li><img class="gallery-image" src="rabbit" alt="rabbit"></li> 
 
</ul> 
 
<ul id="modal"> 
 
    <li><img class="modal-image" src="dog" alt="dog"></li> 
 
    <li><img class="modal-image" src="cat" alt="cat"></li> 
 
    <li><img class="modal-image" src="rabbit" alt="rabbit"></li> 
 
</ul>