实现单个featured-body段落的Show/hide功能修复需求

Got it, let's sort out this issue where clicking one "Continue Reading" button expands all your .featured-body paragraphs instead of just the one it's paired with. The core problem with your original code is that it's targeting all elements with the same class globally, instead of isolating each .featured-body section. Here's how to fix it using jQuery's .each() traversal and container-specific targeting:

Modified JavaScript Code #

var showChar = 200; // Set a char limit
var ellipses = "<span class='ellip'>...</span>";
var button = "<p><button class='continue-btn btn btn-success'>Continue Reading</button></p>";

// Iterate over each .featured-body container one by one
$('.featured-body').each(function() {
  var $currentContainer = $(this);
  var $targetParagraph = $currentContainer.find('p');
  var paragraphText = $targetParagraph.text();
  var paragraphLength = paragraphText.length;

  if (paragraphLength > showChar) {
    // Split the text for THIS specific paragraph only
    var firstHalf = paragraphText.slice(0, showChar);
    var secondHalf = paragraphText.slice(showChar);

    // Replace content in the current paragraph
    $targetParagraph.empty()
      .append("<span class='first'>" + firstHalf + ellipses + "</span>")
      .append("<span class='second'>" + secondHalf + "</span>");
    
    // Add the button AFTER the paragraph (cleaner HTML structure)
    $targetParagraph.after(button);

    // Hide the second half for this section only
    $currentContainer.find('.second').hide();
  }
});

// Handle button clicks with event delegation (works for dynamically added buttons)
$(document).on('click', '.continue-btn', function() {
  var $clickedButton = $(this);
  // Find the closest parent .featured-body to the clicked button
  var $parentContainer = $clickedButton.closest('.featured-body');
  
  // Target only the elements inside THIS parent container
  var $hiddenText = $parentContainer.find('.second');
  var $ellipsis = $parentContainer.find('.ellip');

  // Toggle visibility for the targeted elements
  $hiddenText.toggle();
  $ellipsis.toggle();

  // Update button text
  if ($clickedButton.text() === "Continue Reading") {
    $clickedButton.text("Show Less");
  } else {
    $clickedButton.text("Continue Reading");
  }
});

Key Fixes & Explanations #

• Per-container processing: We use $('.featured-body').each() to loop through every section individually. This ensures each paragraph gets its own split text and button, instead of all paragraphs sharing the same content.
• Container-specific targeting: Instead of using global selectors like $('.second'), we use $parentContainer.find('.second') to only affect elements inside the same .featured-body as the clicked button. The .closest('.featured-body') method is perfect here—it climbs up the DOM tree to find the nearest parent container of the clicked button.
• Valid HTML: We replaced the duplicate id='ellip' with a class (class='ellip') because IDs must be unique on a page. We also removed the duplicate id='act' from buttons, using a class instead.
• Cleaner structure: Buttons are added after the paragraph (with .after()) instead of inside it, which follows HTML best practices (paragraphs should contain flow content, not block-level buttons).

Your existing HTML doesn't need any changes—this code will work seamlessly with the two .featured-body sections you already have.

内容的提问来源于stack exchange，提问作者Nick0989