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，然后在.more

中找到main

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

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>

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

1 个答案: