Question

我的内容DIV有很多段落。这就是它的'标记外观，

<div class="more">
    <p>Based on a study of its skull, scientists say that an extinct one-tonne relative of the guinea pig probably used its 30cm incisors like tusks. Based on a study of its skull, scientists say that an extinct one-tonne relative of the guinea pig probably used its 30cm incisors like tusks. </p>
    <p>That an extinct one-tonne relative of the ncisors like tusks. Based on a study of its skull, scientists say that an extinct one-tonne relative of the guinea pig probably used its 30cm incisors like tusks. </p>
    <p>Extinct one-tonne relative of the guinea pig probably used its 30cm incisors like tusks. Based on a study of its skull, scientists say that an extinct one-tonne relative of the guinea pig probably used its 30cm incisors like tusks. </p>
</div>

现在，我需要在字符达到<div class="more">的300后添加“阅读更多”的链接。而且我想将此链接显示为切换。

我只是用jquery尝试过，但我无法正确判断它。

这是我的jquery -

var showChar = 300;
var ellipsestext = "...";
var moretext = "more";
var lesstext = "less";
$('.more').each(function() {
    var content = $(this).html();

    if(content.length > showChar) {

        var c = content.substr(0, showChar);
        var h = content.substr(showChar-1, content.length - showChar);

        var html = c + '<span class="moreelipses">'+ellipsestext+'</span>&nbsp;<span class="morecontent"><span>' + h + '</span>&nbsp;&nbsp;<a href="" class="morelink">'+moretext+'</a></span>';

        $(this).html(html);
    }

});

$(".morelink").click(function(){
    if($(this).hasClass("less")) {
        $(this).removeClass("less");
        $(this).html(moretext);
    } else {
        $(this).addClass("less");
        $(this).html(lesstext);
    }
    $(this).parent().prev().toggle();
    $(this).prev().toggle();
    return false;
});

JS FIDDLE使用当前的jquery

希望有人可以帮助我。谢谢。

Answer 1

这样的事情将有助于保持<p>并且有300个字符数。

var showChar = 300;
	var ellipsestext = "...";
	var moretext = "more";
	var lesstext = "less";
	$('.more').each(function() {
	  var content = $(this).html();
	  var textcontent = $(this).text();

	  if (textcontent.length > showChar) {

	    var c = textcontent.substr(0, showChar);
	    //var h = content.substr(showChar-1, content.length - showChar);

	    var html = '<span class="container"><span>' + c + '</span>' + '<span class="moreelipses">' + ellipsestext + '</span></span><span class="morecontent">' + content + '</span>';

	    $(this).html(html);
        $(this).after('<a href="" class="morelink">' + moretext + '</a>');
	  }

	});

	$(".morelink").click(function() {
	  if ($(this).hasClass("less")) {
	    $(this).removeClass("less");
	    $(this).html(moretext);
        $(this).prev().children('.morecontent').fadeToggle(500, function(){
          $(this).prev().fadeToggle(500);
        });
       
	  } else {
	    $(this).addClass("less");
	    $(this).html(lesstext);
        $(this).prev().children('.container').fadeToggle(500, function(){
          $(this).next().fadeToggle(500);
        });
	  }
      //$(this).prev().children().fadeToggle();
	  //$(this).parent().prev().prev().fadeToggle(500);
	  //$(this).parent().prev().delay(600).fadeToggle(500);
	  
	  return false;
	});

.morecontent {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="more">
  <p>Based on a study of its skull, scientists say that an extinct one-tonne relative of the guinea pig probably used its 30cm incisors like tusks. Based on a study of its skull, scientists say that an extinct one-tonne relative of the guins 30cm incisors
    like tusks.</p>
  <p>That an extinct one-tonne relative of the ncisors like tusks. Based on a study of its skull, scientists say that an extinct one-tonne relative guinea picm incisors like tusks.</p>
  <p>Extinct one-tonne relative of the guinea pig probably used its 30cm incisors like tusks. Based on a study of its skull, scientists say that an extinct one-tonne relative of the guinea pig probably used its 30cm incisors like tusks.</p>
</div>

编辑：更新了代码段 - 使用<a href="morelink">容器

添加了淡化效果

Answer 2

这是您实现JSFIDDLE

的方法

var content = $(this).text();
//var content = $(this).html();

如果浏览器发现任何html标记中断，则会自动附上相关标记：</p>。

Answer 3

可能会在代码段下方为您提供帮助：

$(document).ready(function(){ 


           var showChar = 300;
           var ellipsestext = "...";
           var moretext = "more";
           var lesstext = "less";
           var h = "";
           var content = $(".more").text();

           if(content.length > showChar) 
           {
                var c = content.substr(0, showChar);
                h = content.substr(showChar-1, content.length - showChar);

                var html = c + '<span class="moreelipses">'+ellipsestext+'</span>&nbsp;<span>&nbsp;&nbsp;<a href="" class="morelink">'+moretext+'</a></span>';

                $(".more").html(html);
                $('.morecontent').hide();
            }

        $(".morelink").click(function()
        {
            if($(this).hasClass("less")) 
            {
                $('.more').remove(h);
                $(this).removeClass("less");
                $(this).html(moretext);
            } 
            else 
            {
                $('.more').append(h);
                $(this).addClass("less");
                $(this).html(lesstext);
            }

            $(this).parent().prev().toggle();
            $(this).prev().toggle();
            return false;
        });

});

如何在jquery中添加许多段落的“read more”链接？

3 个答案: