Question

当我单击li时，它应获得当前单击的li ID，而不是父li ID。假设我有如下代码，当我单击子li时，它同时给了我父ID和当前li ID。我只需要当前的li ID。

请帮助我纠正此问题。预先感谢。

$('.scrollTo').click(function() {
  var id = $(this).attr('id');
  var arr = id.split('-');
  var menu_id = arr[2];
  $('html, body').animate({
    scrollTop: $("#" + menu_id).offset().top
  }, 500);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
  <li id="15" class="scrollTo">
    <ul>
      <li id="12" class="scrollTo"></li>
    </ul>
  </li>
</ul>

Answer 1

您需要使用stopPropagation()方法来防止事件冒泡到DOM树。

$('.scrollTo').click(function(e) {
  e.stopPropagation();
  var id = $(this).attr('id');
  console.log(id);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
  <li id="15" class="scrollTo">
    <ul>
      <li id="12" class="scrollTo"></li>
    </ul>
  </li>
</ul>

Answer 2

$('.scrollTo').click(function(e) {
  e.stopPropagation();
  var id = $(this).attr('id');
  console.log("id", id);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
  <li id="15" class="scrollTo">
    <ul>
      <li id="12" class="scrollTo"></li>
    </ul>
  </li>
</ul>

如何获取子属性值，如在单击jquery中的id？

2 个答案: