根据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

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

	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>