Question

我有一个供成员显示的页面，我在foreach中使用循环来输入成员。每个成员都有以下html标记

循环从这里开始

<div class="member">
<div class="row wrapper">
<div class="image col-sm-3 col-md-3 col-lg-3 col-xs-12">
<a href="#" class="image-wrapper background-image">
<img src="abc.jpg" alt="member-profile" class="img img-responsive bm-profile-img" >
</a>                                        
</div>
<div class="cont col-sm-9 col-md-9 col-lg-9 col-xs-12">
<div class="row">
<h3>
<a class="title">Title</a>
</h3>
</div>
<div class="row">
<h4 class="summary">
<a href="#">Summary</a>
</h4>
</div>
<div class="row">
<div class="description">
<p>Description</p>
</div>
</div>
<div class="row">
<div class="detail read-more" id="bd-read-more">See All</div >
</div>
</div>                                                              
</div>                              
</div>

循环到此结束

div描述默认情况下是隐藏的。当某人单击“查看全部”时，应显示它。我可以通过使用像这样的简单jQuery来实现

$("#bd-read-more").click(function(){
$(".description").slideToggle('slow', 'swing');
});

我的问题是，由于我有多个.description div（每个成员一个），所以所有.description div都响应一个“查看全部”按钮。

如何使点击的“查看所有”按钮部分仅.description个div响应？

Answer 1

您可以这样做。

$(".read-more").click(function() { // Note I've changed from ID to class, since ID shall always be unique
  $(this).closest(".wrapper").find(".description").slideToggle('slow', 'swing');
});

.closest('.wrapper')在HTML树中“向上”，并在类wrapper中查找第一个元素。

.find('.description')在html中“向下”查找并找到类description的所有元素

这将查找类为wrapper的最近元素，然后找到description元素并对其进行魔术处理。

演示

$(".read-more").click(function() {
  $(this).closest(".wrapper").find(".description").slideToggle('slow', 'swing');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="member">
  <div class="row wrapper">
    <div class="image col-sm-3 col-md-3 col-lg-3 col-xs-12">
      <a href="#" class="image-wrapper background-image">
        <img src="abc.jpg" alt="member-profile" class="img img-responsive bm-profile-img">
      </a>
    </div>
    <div class="cont col-sm-9 col-md-9 col-lg-9 col-xs-12">
      <div class="row">
        <h3>
          <a class="title">Title</a>
        </h3>
      </div>
      <div class="row">
        <h4 class="summary">
          <a href="#">Summary</a>
        </h4>
      </div>
      <div class="row">
        <div class="description">
          <p>Description</p>
        </div>
      </div>
      <div class="row">
        <div class="detail read-more" id="bd-read-more">See All</div>
      </div>
    </div>
  </div>
</div>

在jQuery的同一部分内定位不同的元素

1 个答案: