在純JavaScript中選擇任何隨機div後，如何在循環中逐一選擇nextElementSibling項目？

Question

我可以通過點擊它並應用邊框來選擇列表中的任何項目。然後，當我點擊右箭頭按鈕來選擇下一個項目，我已經選擇了項目，通過點擊它是行不通的。它選擇下一個項目，但只有一次。我希望通過逐個點擊右箭頭來申請每個項目。同樣的事情以相反的順序左轉。有人可以用純JavaScript來幫助我。下面是我的腳本只能用於一次點擊。

<ul id="gallery"> 
    <li><img src="images/one.jpg" /></li> 
    <li><img src="images/two.jpg" /></li> 
    <li><img src="images/three.jpg" /></li> 
    <li><img src="images/four.jpg" /></li> 
</ul> 

<div id="leftArw"></div> 
<div id="rightArw"></div> 


var list = document.getElementById("gallery").getElementsByTagName("LI");  
var items, currentDiv, leftArw, rightArw;  
leftArw = document.getElementById("leftArw"), 
rightArw = document.getElementById("rightArw"); 
rightArw.addEventListener("click", right, false); 

for (items = 0; items < list.length; items++) { 
    list[items].style.border = "none"; 
    //list[items].addEventListener("click", currentItem, false); 
    list[items].onclick = function() { 
     currentDiv = this; 
     this.style.border = "5px solid red"; 
    } 
} 

function right() { 
    currentDiv.nextElementSibling.style.border = "5px solid red"; 
} 

Answer 1

// click handler to set the current "selected" element 
 
document.querySelector("#gallery").addEventListener("click", function(e) { 
 
    // list items are the only valid "click" source to work with 
 
    if (e.target.nodeName !== "LI") { 
 
    return; 
 
    } 
 

 
    var currentlySelectedElement = e.currentTarget // the <ul> element 
 
            .querySelector(".selected"); 
 

 
    if (currentlySelectedElement !== null) { 
 
    currentlySelectedElement.className = ""; 
 
    } 
 

 
    e.target // the <li> element 
 
    .className = "selected"; 
 
}, false); 
 

 
// click handler for the "arrow" button 
 
var right = (function() { // Closure to only query the DOM for the <li> elements once 
 
    var items = document.querySelectorAll("#gallery li"); 
 

 
    function getSelectedItem() { 
 
    var l = items.length, 
 
     i = 0; 
 

 
    for (; i < l; i++) { 
 
     if (items[i].className === "selected") { 
 
     return items[i]; 
 
     } 
 
    } 
 

 
    return null; 
 
    } 
 

 
    // actual click handler to select the next element 
 
    return function() { 
 
    var selectedItem = getSelectedItem(), 
 
     nextItem; 
 

 
    if (selectedItem !== null) { 
 
     nextItem = selectedItem.nextElementSibling || items[0]; 
 

 
     selectedItem.className = ""; 
 
     nextItem.className = "selected"; 
 
    } 
 
    }; 
 
}()); 
 

 
document.querySelector("#rightArw").addEventListener("click", right, false);

.selected { 
 
    outline: solid 1px red 
 
} 
 
#rightArw { 
 
    width: 50px; 
 
    height: 50px; 
 
    background-color: yellow 
 
}

<ul id="gallery"> 
 
    <li>1</li> 
 
    <li>2</li> 
 
    <li>3</li> 
 
    <li>4</li> 
 
</ul> 
 

 
<div id="rightArw"></div>

編輯

你在評論中提到的，如果你在<li />元素添加<img />腳本將無法工作。

<li><img src="images/one.jpg" /></li> 

這是因爲「點擊」事件不會再從<li />但是從<img />元素觸發。也就是說，由於e.target，「選定」狀態現在設置在<img />上。 當您現在點擊「箭頭」時，處理程序會尋找<li />的selected（selectedItem = getSelectedItem()），他無法找到它並因此不會轉到下一個<li />元素（if (selectedItem !== null)）。

爲了讓這個腳本重新開始工作，您將不得不調整e.target部分。 在這種情況下，你將在DOM走一步（.parentNode）：

document.querySelector("#gallery").addEventListener("click", function(e) { 
 
    // images are the only valid "click" source to work with 
 
    if (e.target.nodeName !== "IMG") { 
 
    return; 
 
    } 
 

 
    var currentlySelectedElement = e.currentTarget // the <ul> element 
 
            .querySelector(".selected"); 
 

 
    if (currentlySelectedElement !== null) { 
 
    currentlySelectedElement.className = ""; 
 
    } 
 

 
    e.target // the <img /> 
 
    .parentNode // the <li> element 
 
    .className = "selected"; 
 
}, false); 
 

 
var right = (function() { 
 
    var items = document.querySelectorAll("#gallery li"); 
 

 
    function getSelectedItem() { 
 
    var l = items.length, 
 
     i = 0; 
 

 
    for (; i < l; i++) { 
 
     if (items[i].className === "selected") { 
 
     return items[i]; 
 
     } 
 
    } 
 

 
    return null; 
 
    } 
 

 
    return function() { 
 
    var selectedItem = getSelectedItem(), 
 
     nextItem; 
 

 
    if (selectedItem !== null) { 
 
     nextItem = selectedItem.nextElementSibling || items[0]; 
 

 
     selectedItem.className = ""; 
 
     nextItem.className = "selected"; 
 
    } 
 
    }; 
 
}()); 
 

 
document.querySelector("#rightArw").addEventListener("click", right, false);

.selected { 
 
    outline: solid 1px red 
 
} 
 
#rightArw { 
 
    width: 50px; 
 
    height: 50px; 
 
    background-color: yellow 
 
}

<ul id="gallery"> 
 
    <li><img src="images/one.jpg" /></li> 
 
    <li><img src="images/one.jpg" /></li> 
 
    <li><img src="images/one.jpg" /></li> 
 
    <li><img src="images/one.jpg" /></li> 
 
</ul> 
 

 
<div id="rightArw"></div>

編輯2

我已經添加了另一個檢查在​​點擊處理程序（位於頂部）以防止處理程序在未由<li />（在第一個示例中）或<img />（在第二個示例中）觸發的點擊上運行。