jquery - 分别为每个元素运行函数？

Question

如何分别为每个元素运行函数？

因此，如果我单击第一个打开，则仅应打开第一组。

    $(document).on('click', "a.showdetails", function () {
      $( ".group" ).toggleClass( "opened" );
    });

.option{
  width: 200px;
}

.showdetails{
  display: block;
}

.group{
  display: none;
  width: 200px;
  height: 100px;
  background: #f2f2f2;
}

.group.opened{
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div class="option">
  <a href="#" class="showdetails">open</a>
  <div class="group"></div>
</div>

<div class="option">
  <a href="#" class="showdetails">open</a>
  <div class="group"></div>
</div>

Answer 1

您需要使用单击的元素上下文来查找其具有类组的同级元素:

var groupelements = $('.group');
$(document).on('click', "a.showdetails", function () {
  var targetgroup = $(this).next('.group');
  groupelements.filter(targetgroup).removeClass( "opened" )
  targetgroup.toggleClass( "opened" );
});

注意:您在此处使用了事件委托(delegate)。仅当元素 a.showdetails 动态加载时才应使用它。否则使用 .click 绑定(bind)静态元素的点击。