FAQ 页面的 JavaScript 问题并阅读更多内容

Question

您好，我有一个常见问题解答页面，其中有很多问题。问题具有相同的类名。我的问题是，我不知道如何显示和隐藏“多读/少读”上的所有不同问题内容。

我得到了第一个内容 block 来扩展阅读更多内容。其他区 block 没有更多内容。我对 JavaScript 还很陌生

var s = $("#aboutExpand").html();

if (s.split(' ').length > 50) {
    $("#aboutExpand").html(s.split(' ').slice(0,50).join(' ') + " ... " + '<a href="#" class="read-more">Read more</a>');
}

$("a.read-more").click(function() {
    $("#aboutExpand").html(s);
});

页面内容

                        <article>
                            <div class="moreExpandWrapp">
                                <div class="moreExpandContent" id="aboutExpand">
                                <?php the_content(); ?>
                                 </div>
                             </div>
                        </article>

提前致谢

新问题:谢谢，您的代码在 jsfiddle 中完美运行。我目前正在使用 WordPress，并且必须编写这样的代码。我有一个新问题。有时“阅读更多”按钮不起作用。我认为这可能是我将代码合并到 Wordpress 中的方式。

(function ($) {
$(document).ready(function () {

$(".moreExpandContent").each(function() {
      var s = $(this).html(),
        self = $(this);

      if (s.split(' ').length > 40) {
        self.html(s.split(' ').slice(0, 40).join(' ') + " ... " + '<a href="#" class="read-more">Read more</a>');
        self.children('a.read-more').click(function() {
        self.html(s);
        })
      }
});

});

})(jQuery);

这实际上是在 Wordpress 中编写它的正确方法吗？如果没有，有谁知道正确的方法吗？

Answer 1

您需要的是使用 jQuery.each 调用来定位所有具有“.moreExpandContent”类的 div，id 不能用于此目的，因为它们应该是唯一的，这就是您所需要的:

$(".moreExpandContent").each(function() {
  var s = $(this).html(),
    self = $(this);
  if (s.split(' ').length > 50) {
    self.html(s.split(' ').slice(0, 50).join(' ') + " ... " + '<a href="#" class="read-more">Read more</a>');
    self.children('a.read-more').click(function() {
      self.html(s);
    })
  }
});

这是一个有效的 jsFiddle 演示:https://jsfiddle.net/Le4j3apj/