无法得到span的第二个值

Question

我有这个小问题

<ul>
    <li><span id="test">val1</span></li>
    <li><span id="test">val2</span></li>
    <li><span id="test">val3</span></li>
</ul>

但是当我试图获得点击跨度的值时，我只得到第一个的值 （当我点击第二个或第三个跨度时我无法得到它的值）我不知道为什么会发生这种情况。

这是jquery代码：

$(document).ready(function(){

   $("#test").click(function(){
         val = $(this).text();
         alert(val);
    });

});

Answer 1

我应该是唯一的，使用类而不是它。

<ul>
<li><span class="test">val1</span></li>
<li><span class="test">val2</span></li>
<li><span class="test">val3</span></li>
</ul>

JS

$(document).ready(function(){

   $(".test").click(function(){
         val = $(this).text();
         alert(val);
    });

});

Demo

Answer 2

使用class而不是id。因为id应该是唯一的。

<ul>
<li><span class="test">val1</span></li>
<li><span class="test">val2</span></li>
<li><span class="test">val3</span></li>
</ul>

jquery的

$(document).ready(function(){

   $(".test").click(function(){
         val = $(this).text();
         alert(val);
    });

});

Demo