addEventListener 및 getElementsByClassName을 사용하여 요소 ID 전달

addEventListener 및 getElementsByClassName을 사용하여 요소 ID 전달

JSON 파일에서 항목 목록을 정의하고 해당 목록을 웹 페이지에 표시하는 중입니다.사용자는 해당 목록의 항목을 클릭하여 해당 항목에 대한 추가 정보(동일한 JSON 파일에 저장된 정보)를 표시할 수 있습니다.

이 목록의 모든 항목은 동일한 클래스의 구성원이며 각 항목은 JSON 파일에서 정의된 고유 ID를 가집니다.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());

그러나 어떤 세부 정보를 인쇄할지 결정하기 위해 이벤트 수신기에서 인쇄 기능으로 id를 전달하는 방법을 잘 모르겠습니다.

저는 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

코데펜 데모

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가 코멘트에서 지적한 바와 같이, 지원하고자 하는 브라우저가 JavaScript의 최신 버전인 ECMA Script 6(ES6)을 준수하는 경우 다음을 사용할 수 있습니다.

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

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

제가 할 수 있는 방법은 이렇습니다.먼저 개체 값을 사용하여 배열을 만듭니다.

const userSelection = Object.values(document.getElementsByClassName('menu'));

그리고 나서 저는 각각의 포어를 사용하여 그것들을 고리 모양으로 돌립니다.

userSelection.forEach(link => {
    link.addEventListener(event => {
        event.preventDefault();
        // more code here
    });
});

진정해요!

클릭 이벤트에 응답한 요소에서 ID를 얻을 수 있습니다.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>

<ul id = "menuList">
   <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>


// JS - Event Bubbling
const menuList= document.getElementById("menuList");
menuList.addEventListener("click", function (e) {
        console.log(e.target); // log clicked element 
});

항상 사용하는 짧은 버전은 다음과 같습니다.

[...(document.getElementsByClassName('__MYCLASSNAME__'))].forEach(d => {
  d.addEventListener('click', MYFUNCTION__);
})

언급URL : https://stackoverflow.com/questions/42080365/using-addeventlistener-and-getelementsbyclassname-to-pass-an-element-id