Question

我试图用HTML创建一个列表，可以单击列表中的每个项目。但是我需要知道被单击的项目的ID。

我一直试图让div包围列表项，并关联一个onClick和一个ID标签。然后从综合事件中获取ID标签。

但是我的列表项很复杂，因此它们具有子DOM元素。这意味着，如果我单击<p>，它将不会返回与div标签关联的ID。

我不确定这样做的最佳方法是什么？强文本

Answer 1

以下是您可以参考的一些解决方案：

如果使用jQuery，请尝试以下api：ele.closest("div")获取外部div标签
研究并捕获javascript事件，然后您将得到答案

Answer 2

此问题在这里得到了很好的回答：JavaScript - onClick to get the ID of the clicked button

最初显示的是按钮单击，但是您可以将其用于所需的li元素（或任何元素）。

祝你好运！

Answer 3

let li = $("li");
li.on("click", getId);

function getId(e) {
   e.stopPropagation();
   let id = $(this).attr("id");
   console.log(id + " was clicked!");
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
    <li id="element_1">1. Click me</li>
    <li id="element_2">2. Click me
        <ul>
            <li id="element_2.1">2.1. Click me</li>
            <li id="element_2.2">2.2. Click me</li>
            <li id="element_2.3">2.3. Click me</li>
        </ul>
    </li>
    <li id="element_3">3. Click me</li>
    <li id="element_4">4. Click me</li>
</ul>

Answer 4

我希望这会有所帮助，如果我理解正确的话，在您的HTML中，您可以尝试

<ul>
  <li><a href="#" id="1" class="test">Coffee</a></li>
  <li><a href="#" id="2" class="test">Tea</a></li>
  <li><a href="#" id="3" class="test">Milk</a></li>
</ul>

然后在jquery中尝试

 $(document).on("click", ".test", function (e) {
            e.preventDefault();
            alert($(this).attr("id"));
        });

从可点击列表中获取ID

4 个答案: