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中的 ID必须是唯一的，您可以使用公共类，然后使用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

id应该是唯一的。而是使用类

figure

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

点击<li>列表仅适用于第一个

3 个答案: