jQuery文本长短控制逻辑错误求助：按钮效果与需求反转

Let’s get this sorted out—your current code is toggling content in the opposite direction because of two key issues: the truncated text isn’t hidden by default, and the toggle logic is acting on elements in the wrong order. Here’s the step-by-step fix:

What Went Wrong? #

1. Initial Content Visibility: The longer part of your text is visible right away instead of being hidden. So when you click the button, it’s hiding the content you wanted to reveal.
2. Off-by-One Truncation: The original substr(showChar-1, ...) was cutting off one character early, leading to odd-looking truncated text.
3. Unpredictable Toggle Logic: Using toggle() without setting a clear initial state caused the button to act in reverse of your intended behavior.

Fixed Code #

JavaScript #

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, content.length - showChar); // Fixed off-by-one error
        // Hide the truncated content by default
        var html = c + '<span class="moreelipses">'+ellipsestext+'</span>&nbsp;<span class="morecontent"><span style="display:none;">' + h + '</span>&nbsp;&nbsp;<a href="" class="morelink">'+moretext+'</a></span>'; 
        jQuery(this).html(html); 
    } 
}); 

jQuery(".morelink").click(function(e){ 
    e.preventDefault(); // Clean way to stop link default behavior
    var $hiddenContent = jQuery(this).prev();
    var $ellipsis = jQuery(this).closest('.morecontent').prev('.moreelipses');
    
    if(jQuery(this).hasClass("less")) { 
        jQuery(this).removeClass("less"); 
        jQuery(this).html(moretext); 
        $hiddenContent.hide();
        $ellipsis.show();
    } else { 
        jQuery(this).addClass("less"); 
        jQuery(this).html(lesstext); 
        $hiddenContent.show();
        $ellipsis.hide();
    } 
});

HTML #

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

Key Changes Explained #

• Default Hidden Content: Added style="display:none;" to the span holding the truncated text, so it stays hidden until the button is clicked.
• Fixed Truncation: Adjusted substr(showChar-1, ...) to substr(showChar, ...) to capture the exact remaining content after the 200th character.
• Explicit Show/Hide: Replaced ambiguous toggle() calls with explicit show()/hide() to make the logic predictable and aligned with your intended behavior.
• Reliable Element Targeting: Used closest() and prev() to target elements more clearly, making the code easier to read and maintain.

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