根据长度显示或隐藏文本 jQuery

Question

我有这段代码可以工作，但有一些逻辑错误。

目前，如果文本超过 200 个字符，我想要一个显示"继续阅读"的按钮。现在情况正好相反，我不知道为什么。单击"继续阅读"时，它应显示文本的其余部分。相反，它会隐藏文本。我该如何解决这个问题？

	var showChar = 200;
	var ellipsestext = "...";
	var moretext = '<br><button class="continue-btn btn btn-success">Continue Reading</button>';
	var lesstext = '<br><button class="continue-btn btn btn-success">Show less</button>';
	jQuery('.featured-body').each(function() {
		var content = jQuery(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>';
			jQuery(this).html(html);
		}
	});
	jQuery(".morelink").click(function(){
		if(jQuery(this).hasClass("less")) {
			jQuery(this).removeClass("less");
			jQuery(this).html(moretext);
		} else {
			jQuery(this).addClass("less");
			jQuery(this).html(lesstext);
		}
		jQuery(this).parent().prev().toggle();
		jQuery(this).prev().toggle();
		return false;
	});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container"> 
<div class="featured-body">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>

Answer 1

试试这个。我认为这对你来说会更好一点

.HTML：

<div class="container"> 
<div class="featured-body">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>

JQUERY：

$(document).ready(function(){
var button = "<p><button class='continue-btn btn btn-success' id='act'>Continue Reading</button></p>";
var showChar = 200;   // Set a char limit
var ellipses = "<span id='ellip'>...</span>";
var pcount = $('.featured-body p:first').text().length;  // get paragraph char count
if(pcount > showChar){
// split the paragraph in two
var first_half  = $('.featured-body p').text().slice(0,200);
var second_half = $('.featured-body p').text().slice(200,pcount);
// erase the current paragraph text
$('.featured-body p:first').text("");
// Append the first and second halves, with new <div> classes, using :first because the button tag is wrapped in p, as it should be with HTML5
$('.featured-body p:first').append("<div class='first'>"+first_half+ellipses+</div>");
$('.featured-body p:first').append("<div class='second'>"+second_half+"</div>");
$('.featured-body p:first').append(button);
// Hide second half
$('.second').hide();
}
$('#act').on('click',function(){ 
// Toggle the second half on or off
$('.second').toggle();
$('#ellip').toggle();
// Change the button text
if($(this).text() == "Continue Reading"){
$(this).text("Show Less")
}else{
$(this).text("Continue Reading");
}
}); 
});

Answer 2

这是正确的代码，只需对@clearshot68进行一些调整

second_half变量在first_half上使用 span 标记而不是div，将文本内联。

	var showChar = 1200;   // Set a char limit
	var ellipses = "<span id='ellip'>...</span>";
	var button = "<p><button class='continue-btn btn btn-success' id='act'>Continue Reading</button></p>";
	var pcount = $('.featured-body p:first').text().length;  // get paragraph char count
	if(pcount > showChar){
	   // split the paragraph in two
	   var first_half  = $('.featured-body p').text().slice(0,200);
	   var second_half = $('.featured-body p').text().slice(200,pcount);
	  // erase the current paragraph text
	  $('.featured-body p:first').text("");
	 // Append the first and second halves, with new <div> classes, using :first because the button tag is wrapped in p, as it should be with HTML5
	  $('.featured-body p:first').append("<span class='first'>"+first_half+ellipses+"</span>");
	  $('.featured-body p:first').append("<span class='second'>"+second_half+"</span>");
	  $('.featured-body p:first').append(button);
	 // Hide second half
	 $('.second').hide();
	}
	$('#act').on('click',function(){ 
	   // Toggle the second half on or off
	   $('.second').toggle();
	   $('#ellip').toggle();
	  // Change the button text
	  if($(this).text() == "Continue Reading"){
	     $(this).text("Show Less")
	  }else{
	    $(this).text("Continue Reading");
	  }
	});

<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<body>
<div class="container"> 
<div class="featured-body">
<p>Before the floodplain restoration at Landis Homes was underway, residents were concerned about the view and asked for a planted screen to hide the wetland that was under construction.  Now, they wouldn’t dream of hiding the wetland, now flourishing with new flora and fauna. Home to more than 700 residents, the Landis Homes retirement community in Lititz, Pennsylvania, needed additional living space to meet demand for an increasing number of retirees. Landis Homes and their land development consultant RGS Associates contacted LandStudies, Inc., a local landscape architect firm specializing in floodplain restoration and regional stormwater solutions, for help. The team felt that restoring the floodplain would not only provide an amenity for the community, but also improve water quality and provide a unique stormwater management solution for the development. Over the course of three months, the team designed a stream and floodplain restoration project that improved stream function, increased floodwater storage potential, and actively engaged residents to improve social interactions and overall community health. By utilizing the floodplain for stormwater management, land that would be typically set aside for conventional stormwater management basins was used to construct additional housing units, increasing the efficiency of the overall development. 
</p>
</div>
</div>