阅读更多/阅读不同的 <div> 功能

Question

我正在尝试使用 Jquery 实现 Read more / Read less 功能，并且

.

我的小提琴在这里：https://jsfiddle.net/d4riog7/wbnwvgnt/

$('.read_more').each(function() {

$(this).click(function() {

$('.more').slideToggle();

if ($(this).text() == moreText) {
  $(this).text(lessText);

} else {
  $(this).text(moreText);

}

});

});

• 正如您从小提琴中看到的那样，我不能对每个段落单独使用 Read More 和 Read Less 链接，因为它们都同时显示/隐藏（尽管我认为我每个段落都遍历了所有()。

• 此外，点击时文本从“阅读更多 +”变为“阅读更少 -”，但不正确。

我不明白我在循环时做错了什么，有什么建议吗？干杯

Answer 1

你需要指定.more是你想使用的，

$(this).parent('.main').find('.more').slideToggle();

点击.read_more时

找到父.main，然后在main中找到.more

对不起我的英语，希望帮助

moreText = "Read More +",
lessText = "Read Less -";

$('.read_more').click(function() {

  $(this).parent('.main').find('.more').slideToggle();

  if ($(this).text() == moreText) {
    $(this).text(lessText);

  } else {
    $(this).text(moreText);

  }

});

.more {
  display: none;
}

.read_more {
  cursor: pointer;
  color: blue;
  font-size: 15px;
}

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

  <h3>Lorem ipsum </h3>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
  <p class="more">Sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim</p>
  <a class="read_more">Read More +</a>
</div>


<div class="main">

  <h3>Ipsum dolor</h3>
  <p>Laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim </p>
  <p class="more">consectetuer sed diam nonummy nibh euismod adipiscing elit, sed diam nonummy nibhLorem ipsum dolor sit amet.</p>
  <a class="read_more">Read More +</a>
</div>

<div class="main">

  <h3>Ipsum dolor</h3>
  <p>Laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim </p>
  <p class="more">consectetuer sed diam nonummy nibh euismod adipiscing elit, sed diam nonummy nibhLorem ipsum dolor sit amet.</p>
  <a class="read_more">Read More +</a>
</div>