我正在寻找的功能：
点击继续阅读按钮，显示该按钮段落的其余修剪文本（这有效，但仅适用于所有特色体段落。我需要它适用于各个段落）。
因此，点击第一个按钮只会影响被指定为class =“featured-body”的第一段。单击第二个将影响下一个段落，依此类推。
我想我需要添加某种.each（）或.cloesest（'p'），但我不确定。 我需要按钮才能打开它所关联的一个段落（它上面的一个按钮）
有什么想法吗？
var showChar = 200; // 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').text().length; // get paragraph char count
jQuery(pcount).each(function() {
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').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').append("<span class='first'>"+first_half+ellipses+"</span>");
$('.featured-body p').append("<span class='second'>"+second_half+"</span>");
$('.featured-body p').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>
<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 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 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>
答案 0 :(得分：2)
问题是按钮ID。您不能拥有重复的ID。每个HTML元素的ID必须是唯一的。因此，您可以轻松地更改您的类名称，例如下面的剪辑：
// Max chars
var showChar = 200;
// Changed ids to class names, remember that ids must be unique
var ellipses = "<span class='ellip'>...</span>";
var button = "<p><button class='continue-btn btn btn-success act'>Continue Reading</button></p>";
// Get all the paragraphs
var p = $('.featured-body p');
// For each paragraph to "crop"
p.each(function() {
// Sets the reference to the paragraph itself
var self = $(this);
// Text setting
var first_half = self.text().slice(0,200);
var second_half = self.text().slice(200, self.text().length);
self.text("");
// Adds the elements
self.append("<span class='first'>"+first_half+ellipses+"</span>");
self.append("<span class='second'>"+second_half+"</span>");
self.append(button);
// Hide the overflowing text
self.find('.second').hide();
});
// Bind to all the .act buttons
$('.act').on('click',function(){
// Selects the container .featured-body
var container = $(this).closest('.featured-body');
// Sho/hide related elements
container.find('.second').toggle();
container.find('.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>
<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 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 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>