Question

如果其内容达到最大字符长度，我试图在每个段落的末尾显示一个readmore链接。

这是我的HTML -

<div class="row-two">
    <h5>Whitney Houston's daughter found</h5>
    <h6>Whitney Houston's daughter found unresponsive in bath</h6>
    <p class="more-from-expert">Bobbi Kristina Brown, the only daughter of the late pop star Whitney Houston and singer Bobby Brown, was found unresponsive in a bathtub at her Georgia home, but she was revived and rushed to a hospital, police say. Kristina Brown, the only daughter of the late pop star Whitney Houston and singer Bobby Brown, was found unresponsive in a bathtub.</p>
</div>

这是我的Jquery -

// Expand and Collapse experts' profile information. 
var countChar = 200;
var ellipses = "...";
var moreLink = "Read More";
var lessLink = "Read Less";
$('.more-from-expert').each(function() {
  var htmlContent = $(this).html();
  var textContent = $(this).text();

  if (textContent.length > countChar) {

    var shortPara = textContent.substr(0, countChar);

    var paragraph = '<span class="container"><span>' + shortPara + '</span>' + '<span>' + ellipses + '</span></span><span class="allContent">' + htmlContent + '</span>';

    $(this).html(paragraph);
  $(this).after('<a href="" class="readmore">' + moreLink + '</a>');
  }

});

$(".readmore").click(function() {
  if ($(this).hasClass("less")) {
    $(this).removeClass("less");
    $(this).html(moreLink);
  $(this).parent().prev().children('.allContent').fadeToggle(200, function(){
    $(this).prev().fadeToggle(200);
  });

  } else {
    $(this).addClass("less");
    $(this).html(lessLink);

  $(this).parent().prev().children('.container').fadeToggle(200, function(){
    $(this).next().fadeToggle(200);
  });
  }

  return false;

});

此编码显示正确读取更多链接。但段落内容不相应。

这是带有当前代码的DEMO。

有谁可以告诉我这有什么问题？希望有人可以帮助我。谢谢。

Answer 1

你有这个

$(this).parent().prev().children...

将其更改为此

$(this).prev().children...

Answer 2

在readmore函数中更改行

$(this).parent().prev().children()

到

$(this).prev().children

阅读更多链接到段落不能正常工作

2 个答案: