Question

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

因此，如果我点击第一个open，则只应打开第一个组。

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 1

您需要使用单击的元素上下文来查找具有类组的兄弟元素：

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

注意：您在此处使用了事件委派。只有在动态加载元素a.showdetails时才应使用它。否则使用.click来绑定静态元素的点击。

Answer 2

您需要先获取Clicked Anchor的父级。更改HTML元素放置时，使用Jquery .next()可能会出现问题。但是通过父容器获取元素是一种很好的做法。

<强> HTML：

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

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

的Javascript / JQuery的：

$(function() {

      $( ".showdetails" ).click(function() {
        // Getting Parent of clicked Anchor
        var parent_option = $(this).closest('.option');
        // Toggle class to the child .group class element.
        $( ".group", parent_option ).toggleClass( "opened" );    
      });

    });

<强> CSS：

.option{
      width: 200px;
    }

    .showdetails{
      display: block;
    }

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

    .group.opened{
      display: block;
    }

工作演示： http://jsfiddle.net/ha97tmjf/

分别运行每个元素的功能？

2 个答案: