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 />，“{selected”状态现在设置在e.target上。当您现在点击“箭头”时，处理程序会查找一个<li />，其中包含selected（selectedItem = getSelectedItem()），但他找不到，因此不会转到下一个{{1元素（<li />）。

要让此脚本恢复工作，您必须调整if (selectedItem !== null)部分。在这种情况下，你必须在DOM中走一步（e.target）：

.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 }

修改2

我在<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>点击处理程序（右上角）中添加了另一项检查，以防止处理程序在<ul />未触发的点击上运行（在第一个示例中）或者第二个例子中的<li />。

在纯javascript中选择任何随机div后，如何通过每次单击逐个循环选择nextElementSibling项？

1 个答案: