Как я могу выбрать элемент nextElementSibling в цикле один за другим каждый клик после выбора любого случайного div в чистом javascript?

javascript arrays loops for-loop

415 просмотра

1 ответ

Я могу выбрать любой элемент в списке, нажав на него и применив рамку. Затем, когда я нажимаю на кнопку со стрелкой вправо, чтобы выбрать следующий элемент, из которого я уже выбрал элемент, нажав на него, не работает. Он выбирает следующий элемент, но только один раз. Я хочу, чтобы это применялось к каждому элементу, нажимая стрелку вправо один за другим. то же самое в обратном порядке для левой стрелки. Может кто-нибудь помочь мне с чистым 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";
}
Автор: jake Источник Размещён: 08.11.2019 11:14

Ответы (1)


2 плюса

Решение

// 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деталь. В этом случае вам придется пройти один шаг вверх ( .parentNode) в DOM:

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 />во втором примере.

Автор: Andreas Размещён: 20.08.2016 11:52
Вопросы из категории :
32x32