javascript - 单击 <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 中的 ID 必须是唯一的，您可以使用通用类，然后使用 Class Selector (“.class”)

Selects all elements with the given 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);
});