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的同时，在“阅读更多”文本和“显示较少”之间切换。这是否可能？

- ngplayground

---

可能是[ jQuery - slideToggle() and Toggle Text ]的重复问题 (https://dev59.com/8U3Sa4cB1Zd3GeqPrQLf)。 - dsgriffin

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.
});

- bipen

---

请注意，如果您进行本地化，这可能会成为问题。 - 502_Geek

Answer 2

代码中有一个小修改，因为上面的代码对我不起作用。我在左右两侧添加了带空格的阅读更多文本，所以三元运算符无法识别它。我添加了$.(trim)使其正常工作。

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

- Zaheer Abbas