使用 JQuery 循环访问 DOM 元素以分配单击处理程序

Question

我需要用JQuery遍历DOM，并向多个父元素添加一个点击处理程序，这些父元素包含一个子元素，该子元素也将获得slideToggle()。当我手动添加点击处理程序时，我的逻辑工作正常，但现在我需要能够对多个父元素动态执行此操作。

这是我的 HTML：

<div class="map-poi-nav">
   <ul class="map-poi-nav-dropdown">
      //Parent #1
      <li class="sub-menu-link" id="sub-menu-link-1">
         <a href="#">
         <img src="https://svgshare.com/i/ADc.svg"> Activities
         </a>
      </li>
      <li class="sub-menu">
         <ul class="sub-menu-list" id="sub-menu-list-1">
            <li><a><span>•</span>Golden State Park</a></li>
            <li><a><span>•</span>Sunrise Oaks City Park</a></li>
         </ul>
      </li>
   </ul>
   <ul class="map-poi-nav-dropdown">
     //Parent #2
      <li class="sub-menu-link" id="sub-menu-link-2">
         <a href="#">
         <img src="https://svgshare.com/i/ADc.svg"> Dining
         </a>
      </li>
      <li class="sub-menu">
         <ul class="sub-menu-list" id="sub-menu-list-2">
            <li><a><span>•</span>The Loft Grill</a></li>
            <li><a><span>•</span>Fish Grill & Bar</a></li>
         </ul>
      </li>
   </ul>
</div>

基本上，您单击.sub-menu-link以slideToggle() .sub-menu-list。

这是我到目前为止使用的JS。它目前手动针对 id，感觉很恶心：

$('#sub-menu-link-1').click(function() {
    $('#sub-menu-list-1').slideToggle(100);
    $(this).toggleClass('active-menu-link');
});
$('#sub-menu-link-2').click(function() {
    $('#sub-menu-list-2').slideToggle(100);
    $(this).toggleClass('active-menu-link');
});

如果这是在 JQuery 中非常明显的事情，我深表歉意。我对它一点也不熟悉，它恰好是这个项目的要求。

Answer 1

你可以简单地使用以下代码。

选择所有具有类名的列表项并添加侦听器。 单击将附加到所有元素

$('.sub-menu-link').click(function() {
    $(this).slideToggle(100);
    $(this).toggleClass('active-menu-link');
});

Answer 2

你已经有类了，所以只需使用它们而不是id s：使用 this 来引用单击的元素，.next() 来获取下一个同级元素（li.sub-menu），.find('.sub-menu-list')来获取要切换的ul：

$('.sub-menu-link').click(function() {
  const $subMenuList = $(this).next().find('.sub-menu-list');
  console.log($subMenuList.text().trim());
  $subMenuList.slideToggle(100);
  $(this).toggleClass('active-menu-link');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="map-poi-nav">
  <ul class="map-poi-nav-dropdown">
    //Parent #1
    <li class="sub-menu-link" id="sub-menu-link-1">
      <a href="#">
        <img src="https://svgshare.com/i/ADc.svg"> Activities
      </a>
    </li>
    <li class="sub-menu">
      <ul class="sub-menu-list" id="sub-menu-list-1">
        <li><a><span>•</span>Golden State Park</a></li>
        <li><a><span>•</span>Sunrise Oaks City Park</a></li>
      </ul>
    </li>
  </ul>
  <ul class="map-poi-nav-dropdown">
    //Parent #2
    <li class="sub-menu-link" id="sub-menu-link-2">
      <a href="#">
        <img src="https://svgshare.com/i/ADc.svg"> Dining
      </a>
    </li>
    <li class="sub-menu">
      <ul class="sub-menu-list" id="sub-menu-list-2">
        <li><a><span>•</span>The Loft Grill</a></li>
        <li><a><span>•</span>Fish Grill & Bar</a></li>
      </ul>
    </li>
  </ul>
</div>

Answer 3

你可以

像这样使用 jQuery 的.next()：

$(".sub-menu-link").click(function() {
    $(this).next(".sub-menu-link").slideToggle(100);
    $(this).toggleClass("active-menu-link");
})

或者你可以链接它们并使用 ES6 箭头语法使其更简洁：

$(".sub-menu-link").click(() => $(this).toggleClass("active-menu-link").next(".sub-menu-link").slideToggle(100));

Answer 4

如果您的列表和链接 ID 与您显示的代码具有类似的模式，您应该尝试此操作

$('#sub-menu-link').click(function() {
    var id = $(this).attr("id").replace("sub-menu-link", "")
    $('#sub-menu-list-'+ id).slideToggle(100);
    $(this).toggleClass('active-menu-link');
});