JavaScript - 목록 항목을 클릭 할 때 텍스트가있는 팝업 창이 있습니다.

Question

아래 스크립트로 무엇이 누락되었는지 파악하려고합니다. 필자의 목표는 목록 항목 중 하나를 클릭 할 때 텍스트가있는 팝업 창이 표시되는 정렬 된 목록 (할당 요구 사항 별)을 갖는 것입니다. 각 목록 항목은 다른 텍스트로 이어집니다.

이 작업을 수행하는보다 효율적인 방법이있을 수 있음을 알고 있습니다.이 점에 대해서는 현재 이해할 수 없으므로 아래의 [비 작업] 해결 방법을 시도하고 있습니다.

예 : 사용자가 "One"목록 항목을 클릭하면 "Item 1"이라는 텍스트가있는 팝업 창이 나타나야하지만 결과적으로 "정의되지 않음"이 표시됩니다. 어떤 팁?

내 테스트 HTML :

<ol id="javaList" onclick="popUp()"> 
    <li value="Item 1">One</li> 
    <li value="Item 2">Two</li> 
    <li value="Item 3">Three</li> 
</ol> 

자바 스크립트 : 코드에서 문제의 몇 가지가 있습니다

<script> 

    window.popUp = function() { 
     var myWindow = window.open("", "", "width=400, height=200"); 
     var ls = document.getElementsByTagName("li"); 
     myWindow.document.write(ls.value); 
    } 

</script> 

Answer 1

.

너비와 높이가 따옴표로 묶일 필요가 없으며 onclick 처리기에서 the event argument으로 요소를 캡처 할 수 있습니다. 귀하의 window.popup 기능이 있어야한다 : 당신은이 모든 경우에 0 반환하는 li의 value을 얻을 수

<script> 
window.popUp = function(event) { 
    var myWindow = window.open("", "", 400, 200); 
    var ls = event.currentTarget; 
    myWindow.document.write(ls.value); 
} 
</script> 

Answer 2

. 대신 data-value으로 변경하십시오.

jQuery 라이브러리를 포함하는 경우 솔루션은 간단 해집니다.

<ol id="javaList"> 
    <li data-value="Item 1">One</li> 
    <li data-value="Item 2">Two</li> 
    <li data-value="Item 3">Three</li> 
</ol> 

그리고 자바 스크립트가 될 것입니다 : 당신의 HTML이 될 것

$('li').on('click', function(event){ 
    var myWindow = window.open("", "", "width=400, height=200"); 
    myWindow.document.write($(this).data('value')); 
}