时间戳

首页 > 解决方案 > Jquery使用父级的数据属性查找元素

javascript - Jquery使用父级的数据属性查找元素

问题描述

我有两个相同的 id 但在不同的 div 中，我正在尝试创建一个点击事件

<div data-group = "points">
  <div>
    <ul>
      <li id="first point"></li>
    </ul>
  </div>
 </div>



<div data-group = "zone">
  <div>
    <ul>
      <li id="first point"></li>
    </ul>
  </div>
</div>

我创建了一个这样的 onclick 事件

this._toolbox._container.on('click', "[id = 'first point']", function (ev) {
}

但这是用“第一点”收听所有ID。

仅当单击 data-group="points" 中的“第一个点”时，如何创建单击事件

任何建议或帮助将不胜感激。

标签： javascriptjqueryonclickonclicklistenerjquery-events

解决方案

第一个问题是它在整个文档中id应该是唯一的。两个元素不应该相同id。你应该使用它class。你可以[data-group=points]在选择器之前使用。
您不需要选择id或class使用属性选择器。只需使用#forid和.forclass

$('[data-group=points] .first-point').click(function(){

  console.log("I am clicked")
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div data-group = "points">
  <div>
    <ul>
      <li class="first-point">one</li>
    </ul>
  </div>
 </div>
<div data-group = "zone">
  <div>
    <ul>
      <li class="first-point">two</li>
    </ul>
  </div>
</div>

推荐阅读