如何让jQuery仅切换被点击的'read more'按钮文本至'read less'

Hey there! I totally get this frustration—nothing’s more annoying than a UI element that misbehaves and messes up every instance instead of just the one you interacted with. Let’s fix this quick and clean.

The Root of the Problem #

Your original code is probably targeting all elements with the same class when you click the button (like using $('.read-more-btn').text('read less')). That’s why every button changes at once—you’re telling jQuery to update every element with that class, not just the one that was clicked.

The Fix: Use $(this) to Target the Clicked Button #

The magic here is $(this)—inside a click event callback, it refers exclusively to the specific button that was clicked. Combine that with DOM traversal methods to only affect the content tied to that button, and you’re good to go.

Step 1: Example HTML Structure

First, make sure each story and its button are wrapped in a parent container (like .story) so we can easily link the button to its content:

<div class="story">
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    <span class="story-hidden" style="display: none;">
      Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    </span>
  </p>
  <button class="read-more-btn">read more</button>
</div>

<div class="story">
  <p>
    Another story snippet here—short and sweet for now.
    <span class="story-hidden" style="display: none;">
      Here’s the rest of the story that only shows up when you click "read more"!
    </span>
  </p>
  <button class="read-more-btn">read more</button>
</div>

Step 2: Modified jQuery Code

This code will only update the clicked button and its corresponding hidden content:

$(document).ready(function() {
  $('.read-more-btn').on('click', function() {
    // Grab the specific button that was clicked
    const $clickedBtn = $(this);
    // Find the parent story container and its hidden content
    const $hiddenContent = $clickedBtn.closest('.story').find('.story-hidden');

    // Toggle button text and content visibility
    if ($clickedBtn.text() === 'read more') {
      $clickedBtn.text('read less');
      $hiddenContent.show(); // Or use slideDown() for smooth animation
    } else {
      $clickedBtn.text('read more');
      $hiddenContent.hide(); // Or slideUp() for smooth animation
    }
  });
});

Bonus: More Reliable State Tracking (Optional) #

If you’re worried about text changes breaking the condition (e.g., if you ever modify the button text), use a data-* attribute to track the state instead:

$(document).ready(function() {
  $('.read-more-btn').on('click', function() {
    const $clickedBtn = $(this);
    const $hiddenContent = $clickedBtn.closest('.story').find('.story-hidden');
    const currentState = $clickedBtn.data('state');

    if (currentState === 'more') {
      $clickedBtn.text('read less').data('state', 'less');
      $hiddenContent.show();
    } else {
      $clickedBtn.text('read more').data('state', 'more');
      $hiddenContent.hide();
    }
  });
});

Just add the data-state attribute to your buttons in the HTML:

<button class="read-more-btn" data-state="more">read more</button>

Key Takeaways #

• $(this) is your best friend here—it lets you target only the element that triggered the event.
• Use closest() to traverse up to the parent container, then find() to grab the related hidden content—this ensures you’re only modifying content tied to the clicked button.

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