Question

我使用jquery编写了一个函数来展开和折叠文本。页面上有多个实例，必须应用此实例，但使用此功能时，单击锚标记时会更改所有实例。我希望它仅适用于单击的段落。

(function expand() {
  $('.expanded').hide();
  $(".more, .less").click(function() {
    $(".expanded, .more").toggle();
  });
})();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<div class="collapsed">"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostru<a href="#" class="more">Read more</a>
</div>
<div class="expanded">pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum." <a href="#" class="less">Read less</a>
</div>
<br>
<br>
<br>
<div class="collapsed">"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostru<a href="#" class="more">Read more</a>
</div>
<div class="expanded">pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum." <a href="#" class="less">Read less</a>
</div>

Answer 1

您需要定位与点击相关联的特定元素。如果您修改HTML以便所有目标元素都在这样的公共容器中，那么这样做会更容易：

<div class="container">
    <div class="collapsed">"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostru<a href="#" class="more">Read more</a>
    </div>
    <div class="expanded">pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum." <a href="#" class="less">Read less</a>
    </div>
</div>

然后，您可以使用$(this).closest(".container")来定位相应的元素以获取父容器，然后在该容器中使用.find(...)来查找与点击相同的容器中的相应元素这样：

(function expand() {
  $('.expanded').hide();
  $(".more, .less").click(function(e) {
    e.preventDefault();
    $(this).closest(".container").find(".expanded, .more").toggle();
  });
})();

可以在不添加容器div的情况下完成，但如果HTML以任何方式更改，它将使您的代码更容易破坏，因此容器概念更加健壮。它还允许您使用CSS来控制组之间的间距，而不是使用<br>标签，这通常也更灵活。

Answer 2

隔离它们：

(function expand() {
  $('.expanded').hide();
  $(".more, .less").click(function() {
    $(this).closest('.expandable').find(".expanded, .more").toggle();
  });
})();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<div class="expandable">
  <div class="collapsed">"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostru<a href="#" class="more">Read more</a>
  </div>
  <div class="expanded">pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum." <a href="#" class="less">Read less</a>
  </div>
</div>
<br>
<br>
<br>
<div class="expandable">
  <div class="collapsed">"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostru<a href="#" class="more">Read more</a>
  </div>
  <div class="expanded">pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum." <a href="#" class="less">Read less</a>
  </div>
</div>

或以不同方式处理.more和.less：

(function expand() {
  $('.expanded').hide();
  $(".more").click(function() {
    $(this).closest(".collapsed").next(".expanded").add(this).toggle();
  });
  $(".less").click(function() {
    var $expanded = $(this).closest(".expanded");
    $expanded.prev('.collapsed').find('.more').add($expanded).toggle();
  });
})();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<div class="collapsed">"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostru<a href="#" class="more">Read more</a>
</div>
<div class="expanded">pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum." <a href="#" class="less">Read less</a>
</div>
<br>
<br>
<br>
<div class="collapsed">"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostru<a href="#" class="more">Read more</a>
</div>
<div class="expanded">pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum." <a href="#" class="less">Read less</a>
</div>

在jquery中应用函数

2 个答案: