javascript - 在纯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>

编辑

您在评论中提到，如果添加 <img />，脚本将无法运行在<li />元素。

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

那是因为 <li /> 不再触发“点击”事件但来自 <img />元素。也就是说，“已选择”状态现在设置为 <img />。因为e.target .当您现在单击“箭头”时，处理程序会查找 <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

我在 <ul /> 中添加了另一张支票单击处理程序(位于顶部)以防止处理程序在不是由 <li /> 触发的点击上运行(在第一个示例中)或 <img />在第二个例子中。