Есть ли способ выбрать индекс элемента массива по клику?

Question

Я борюсь за выбор определенного индекса элемента внутри массива при нажатии. Вот этот код и спасибо заранее!

<div>

 <span class="dot"></span>
 <span class="dot"></span> -- lets say we click on this span
 <span class="dot"></span>
 <span class="dot"></span>
 <span class="dot"></span>

</div>



var dots = document.querySelectorAll(".dot");
for(var i = 0; i < dots.length; i ++){
dots[i].addEventListener("click", function(){
console.log(this) -- prints the actual html <span class="dot"></span>

// ?? How to print index of an element? To be more specific, in this case 
just "1" ??

})
}

Answer 1

Одним из способов достижения этого является добавление свойства (я назвал его dotIndex ) к вашим точкам , а затем console.log этого свойства.

var dots = document.querySelectorAll(".dot");

for(var i = 0; i < dots.length; i ++){
    dots[i].dotIndex = i;
    dots[i].addEventListener("click", function(){
        console.log(this.dotIndex);
    })
}

Проверьте скрипку: https://jsfiddle.net/254uqtm0/

Однако, как предположил Ори Дрори, вы можете просто изменить var на let в вашем цикле, и он будет работать. Если вы не уверены, почему, проверьте эту ветку: В чем разница между использованием "let" и "var"?

Answer 2

Поскольку вы добавляете прослушиватель событий для каждого элемента, вы можете console.log иметь значение i.

Примечание: Я использую let i, а не var i внутрицикл for, потому что let make i находится в области блокировки, и это сохраняет текущее значение i внутри обработчика события.

const dots = document.querySelectorAll(".dot");
for (let i = 0; i < dots.length; i++) {
  dots[i].addEventListener("click", function() {
    console.log({ i });
  })
}

<div>

  <span class="dot">1</span>
  <span class="dot">2</span>
  <span class="dot">3</span>
  <span class="dot">4</span>
  <span class="dot">5</span>

</div>

Answer 3

Вы можете сделать что-то вроде этого

const spans = [...document.getElementsByClassName('dot')];
spans.forEach(i => i.addEventListener('click', () => console.log(spans.indexOf(i))));

Answer 4

Вам нужен только один прослушиватель событий ( делегирование событий ). Обработчик может перебирать существующие элементы и что-то делать с его индексом. Что-то вроде:

const log = (...things) => { 
  console.clear(); 
  things.forEach(thing => console.log(thing))
};

// iterate within the handler
document.addEventListener("click", showIndex);

// alternative: add a dataset value to the elements on page load
// and make the handler do something with that. This is static and
// can't be used if the number of .dott-elements changes dynamcally
Array.from(document.querySelectorAll(".dott")).forEach( (el, i) => el.dataset.index = i);
document.addEventListener("click", alternativeShowIndex);

function showIndex(evt) {
  if (evt.target.matches(".dot")) {
    let currentDot = {};
    const allDots = Array.from(document.querySelectorAll(".dot"));
    for (let i = 0; i < allDots.length; i += 1) {
      if (allDots[i] === evt.target) {
        currentDot = {index: i, text: allDots[i].textContent};
        break;
      }
    }
    log(currentDot);
  }
}

function alternativeShowIndex(evt) {
  evt.target.matches(".dott") && log(evt.target.dataset.index);
}

<div>
 <span class="dot">first</span>
 <span class="dot">second</span>
 <span class="dot">third</span>
 <span class="dot">fourth</span>
 <span class="dot">fifth</span>
</div>

<div>
 <span class="dott">alt-first</span>
 <span class="dott">alt-second</span>
 <span class="dott">alt-third</span>
 <span class="dott">alt-fourth</span>
 <span class="dott">alt-fifth</span>
</div>

Answer 5

Вы можете сделать это

var dots = [...document.getElementsByClassName('dot')];

for (let i=0; i<dots.length; i++) {
	dots[i].addEventListener("click", () => {
  	console.log(i);
  });
}

<div>
   <span class="dot">0</span>
   <span class="dot">1</span> 
   <span class="dot">2</span>
   <span class="dot">3</span>
   <span class="dot">4</span>
</div>