어떻게이처럼 보이는 몇 가지 목록을 생성 한

Question

특정 목록 값을 저장하기 :

<div id="floating-panel"> 
    <ul class="rss"> 
    <li id="list_0"><a href="javascript:void(0)" onclick="displayPopUp();">Diana</a></li> 
    <li id="list_1"><a href="javascript:void(0)" onclick="displayPopUp();">Paul</a></li> 
    <li id="list_2"><a href="javascript:void(0)" onclick="displayPopUp();">Robert</a></li> 
    </ul> 
</div> 

그것은 크거나 작은 목록이 될 수있는 예에 표시된대로 ID 년대는 항상 고유 ... 내 질문은 데이터를 저장할 수 있도록 클릭 한 목록 항목을 어떻게 알 수 있습니까?이 경우 이름 'Diana'또는 'Paul'? 어떤 사람이 클릭했는지 알기 위해 PHP 어딘가에 저장된 태그 사이에 정보가 필요합니다.

더 많은 컨텍스트를 제공하려면 참조를 클릭 할 때 동일한 페이지 팝업 창이 열리 며 사용자 정보를 제공 할 장소가 있으며 클릭 한 링크의 이름도 필요합니다.

는

Answer 1

당신은 이벤트 트리거 요소 얻을 수 있습니다 : event.target에

function displayPopUp(event) { 
    var name = event.target.innerHTML; 
} 

상세 정보 : 나는 자바 스크립트와 프로 아니에요 https://developer.mozilla.org/en-US/docs/Web/API/Event/target

을이 올바른 방향을 가리켜 야합니다 .

Answer 2

당신이 링크를 얻을 싶다면, 그렇지 않으면 제목 당신이 jQuery를 함께 할 간단하게 할 수 있습니다

1. 이 li 요소에 이벤트 리스너를 추가합니다.
2. 이벤트 개시 자의 데이터 진행 : 링크 제목 및 href 가져 오기

$('.rss').find('li').click(function(){ 
 
    var link = $(this).find('a'); 
 
    alert(link.html()); 
 
    alert(link.attr('href')); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="floating-panel"> 
 
    <ul class="rss"> 
 
    <li id="list_0"><a href="javascript:void(0)">Diana</a></li> 
 
    <li id="list_1"><a href="javascript:void(0)">Paul</a></li> 
 
    <li id="list_2"><a href="javascript:void(0)">Robert</a></li> 
 
    </ul> 
 
</div>

Answer 3

당신은 클릭에 리 내에서 a로부터 텍스트,하지만 더 나은 방법을 얻을 수는 주어진에 사람의 이름을 얻기 위해 HTML5의 데이터를 속성 사용하는 것입니다 클릭 한 li.

$(document).ready(function(){ 
 
    $('.rss li').click(function(){ 
 
    var name = $(this).data('name'); 
 
    displayPopUp(name); 
 
    }) 
 
    
 
    
 
function displayPopUp(name) { 
 
    console.log(name); 
 
    } 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="floating-panel"> 
 
    <ul class="rss"> 
 
    <li id="list_0" data-name="Diana"><a href="javascript:void(0)">Diana</a></li> 
 
    <li id="list_1" data-name="Paul"><a href="javascript:void(0)">Paul</a></li> 
 
    <li id="list_2" data-name="Robert"><a href="javascript:void(0)">Robert</a></li> 
 
    </ul> 
 
</div>