jQuery 切换和更改文本

Question

jQuery

$('#message div').hide();
    $('.readmore').click(function(e){
        e.preventDefault();
        $('#message div').slideToggle();
    });

html

<div id="message">
    <p class="intro">This is an introduction.</p>
            <div>
            <p>This is the first paragraph thats orginally hidden</p>
        <p>This is the second paragraph</p>
            </div>
            <a href="#" class="readmore">Read More</a>
        </div><!--message-->

当单击“阅读更多”按钮时，内容会滑动切换并向所有人显示，再次单击它会隐藏以仅显示我的 .intro，但我想在“阅读更多”和“显示更少”之间切换“阅读更多”文本。

使用 SlideToggle 时如何实现这一点

Answer 1

检查当前元素在其点击事件和使用条件中的文本，看看是否需要更改文本，如果需要，请再次使用 text() 进行更改;)。

试试这个:

 $('.readmore').click(function(e){
    e.preventDefault();
    $('#message div').slideToggle();
    $(this).text( $(this).text() == 'Read More' ? "Show Less" : "Read More"); // using ternary operator.
});