it-swarm.com.ru

Использование addEventListener и getElementsByClassName для передачи идентификатора элемента

Я определяю список элементов из файла JSON и отображаю этот список на веб-странице. Цель состоит в том, чтобы пользователи нажимали на любой элемент в этом списке, чтобы отобразить дополнительную информацию об этом элементе (информацию, которая содержится в том же файле JSON). 

Все элементы этого списка являются членами одного класса, и каждый из них имеет уникальный идентификатор, определенный из файла JSON. HTML выглядит примерно так: 

<ul>
   <li class="menu" id="bob">Robert Smith</li>
   <li class="menu" id="jane">Jane Doe</li>
   <li class="menu" id="sue">Susan Carter</li>
</ul>

Я планировал использовать что-то вроде 

var userSelection = document.getElementsByClassName('menu'); 

совместно с 

userSelection.addEventListener('click', myFunctionToPrintDetails());

но я не уверен, как передать идентификатор из прослушивателя событий в функцию печати, чтобы определить, какие детали печатать. 

У меня большой опыт работы с HTML/CSS, но очень мало с JSON/AJAX, так что, возможно, я собираюсь сделать это совершенно беззаботно. Если есть более подходящий способ сделать это, я открыт для обратной связи. 

Я пробовал оба ответа, но ни один не работал. Когда я регистрирую userSelection.length в консоли, я получаю 0; когда я регистрирую userSelection, я получаю: 

HTMLCollection(0)
> sue: li#sue.menu
length: 3
> jane: li#jane.menu
> bob: li#bob.menu
> 0: li#bob.menu
> 1: li#jane.menu
> 2: li#sue.menu
3
Michael

кодовая демонстрация

var userSelection = document.getElementsByClassName('menu');

for(var i = 0; i < userSelection.length; i++) {
  (function(index) {
    userSelection[index].addEventListener("click", function() {
       console.log("Clicked index: " + index);
     })
  })(i);
}

Как отмечает @torazaburo в комментариях, вы можете использовать следующее, если браузеры, которые вы хотите поддерживать, соответствуют ECMAScript 6 (ES6), новейшей версии JavaScript.

var userSelection = document.getElementsByClassName('menu');

for(let i = 0; i < userSelection.length; i++) {
  userSelection[i].addEventListener("click", function() {
    console.log("Clicked index: " + i);
  })
}
6
Déric Dallaire

Вы можете получить идентификатор элемента, который ответил на событие click с помощью this.id:

var items = document.getElementsByClassName('menu');
for (var i = 0; i < items.length; i++) {
  items[i].addEventListener('click', printDetails);
}

function printDetails(e) {
  console.log("Clicked " + this.id);
}
<ul>
   <li class="menu" id="bob">Robert Smith</li>
   <li class="menu" id="jane">Jane Doe</li>
   <li class="menu" id="sue">Susan Carter</li>
</ul>

4
Villa7_

Вы можете передать your id по хранилищу в одну переменную и передать как a parameter ...

var userSelection = document.getElementsByClassName('menu');
for(var i = 0;i<userSelection.length;i++){
var cur_id = userSelection[i].id;
(function(id) {
  userSelection[i].addEventListener('click', detail);
  })(cur_id);
}
function detail(){
  alert(this.id);
  }
<ul>
   <li class="menu" id="bob">Robert Smith</li>
   <li class="menu" id="jane">Jane Doe</li>
   <li class="menu" id="sue">Susan Carter</li>
</ul>

Обновление: если переменная определена вне обработчиков событий, когда мы щелкаем, мы получаем последнее значение, которое было ей установлено. Поэтому необходимо добавить замыкание - функцию [которая ссылается на переменные из внешней области видимости] для каждой функции обработчика событий ,

0
David Jaw Hpan