单击<li>列表只适用于第一个

Question

我有几个li元素，我希望每个元素都是可点击的。这就是我所拥有的：

<li  id="stream-object" data-stream="val1">
<li  id="stream-object" data-stream="val2">
<li  id="stream-object" data-stream="val3">

和我的jquery

$("#stream-object").click(function(){
var stream_link=$(this).data("stream");
$("#main_stream").attr("data",stream_link);
});

但这只适用于第一个李。

Answer 1

这是预期的行为，因为HTML中的必须是唯一的，您可以使用一个公共类然后使用Class Selector (“.class”)

选择具有给定类的所有元素。

HTML

<li class="stream-object" data-stream="val1">
<li class="stream-object" data-stream="val2">
<li class="stream-object" data-stream="val3">

脚本

$(".stream-object").click(function(){
    var stream_link=$(this).data("stream");
    $("#main_stream").attr("data",stream_link);
});

Answer 2

ID (#) 必须是唯一的页面使用clasess (.)

<li class="stream-object" data-stream="val1">
<li class="stream-object" data-stream="val2">
<li class="stream-object" data-stream="val3">

$(".stream-object").click(function(){});

Answer 3

身份应该是唯一的。而是使用类

​

$(".stream-object").click(function(){
  var stream_link=$(this).data("stream");
  $("#main_stream").attr("data",stream_link);
  alert( $(this).html()+' is clicked' );
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li class="stream-object" data-stream="val1">Item 1</li>
  <li class="stream-object" data-stream="val2">Item 2</li>
  <li class="stream-object" data-stream="val3">Item 3</li>
</ul>

​