どのように私はこのようになりますいくつかのリストを生成した

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さんは常にユニークである...私の質問はどのように私がクリックしたリストアイテムを知ることができるので、データを保存することができます。この場合、名前は「ダイアナ」または「ポール」ですか？ PHPのどこかに格納されたタグの間に情報が必要なので、どの人がクリックされたのか分かります。

参照をクリックすると、同じページポップアップウィンドウが開き、ユーザー情報を表示する場所が表示されます。クリックされたリンクの名前も必要です。 event.targetの

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

詳細情報：

Answer 1

あなたがイベントをトリガした要素取得することができますhttps://developer.mozilla.org/en-US/docs/Web/API/Event/target

を私はJavaScriptを使用してプロではないよ、これは正しい方向にあなたを指している必要があります。

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>