Как получить индекс коллекции html при нажатии?

Попытка сделать функцию получения index при каждом щелчке по edit icon. Несмотря на то, что есть решения, использующие closure, все еще не работающие с моим случаем и получающие неправильные результаты, когда есть более одного значка редактирования.

Когда у меня есть три значка, моя консоль выводит:

  1. (3) 0
  2. (2) 1
  3. 2

Нужно знать, почему консоль такая.

Вот рабочий пример js с полным кодом: https://jsfiddle.net/c2L4buj6/5/

Пример кода JS:

function clickEnable(input, title, url, plus, editIcon, anchorEdit, edit)
{
  for(let i = 0; i < editIcon.length; i++){
      editIcon[i].addEventListener("click", function(i){
        console.log(i);
      }.bind(null, i));
  }
}

ОБНОВИТЬ Чтобы более наглядно показать ошибку, загрузил фото о происходящем. На фотографии есть три поля, и при нажатии на значок редактирования он возвращает правильное значение, но также возвращает копии правильного значения. Я хочу знать, что вызывает это.

Вот изображение ошибки

jsfiddle.net/z_acharki/c2L4buj6/9 Похоже, он вернул действительный индекс
Zakaria Acharki 13.09.2018 18:47

@ZakariaAcharki проверьте обновление

Bryan Wong 13.09.2018 20:41

Ваш clickEnable вызывается при каждой отправке и добавляет прослушиватель событий к каждому элементу внутри переменной editIcon. Итак, когда вы нажимаете Разместить в первый раз, прослушиватель кликов добавляется в editIcon-0, когда вы снова нажимаете Разместить, прослушиватель кликов снова добавляется в editIcon-0, а один добавляется editIcon-1. Теперь у editIcon-0 есть два прослушивателя щелчка, отсюда и несколько alert / console.log ... и так далее.

rmn 13.09.2018 20:56
1
3
320
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Вы не удаляете старые прослушиватели событий, поэтому вы получаете дубликаты для всех ранее добавленных элементов.

Одно решение (проверено на основе вашей скрипки):

function clickEnable(input, title, url, plus, editIcon, anchorEdit, edit)
{
  let i = editIcon.length - 1;
  editIcon[i].addEventListener("click", function(){
    console.log(i);
  });
}

Не буду ли я задерживаться в закрытии и обновлять каждую итерацию, делая каждый i одинаковым (последний i в цикле)?

wedstrom 13.09.2018 18:55

Извините, @WillCain, это не сработало. Проверьте мое обновление. Также я предоставил изображение, показывающее ошибку, которую я получаю.

Bryan Wong 13.09.2018 20:42

@BryanWong, извините, я раньше ставил неправильный диагноз; обновил свой ответ после вашего объяснения

Will Cain 13.09.2018 21:24

Другие вопросы по теме