无法获得 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

Id 应该是唯一的，使用 class 代替它。

<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

使用类代替 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