jquery - jQuery函数打开时如何动态添加文本

Question

我的网站上有一个少读/多读切换开关。它工作得很好，但是当它打开时（文本没有隐藏）我希望链接文本“阅读更多”说“阅读少”我是 jQuery 的新手，正在寻找一个简单的解决方案。

这是我的代码：

<div class="survey_text">
  Always visable text
</div>
<h3 class="read-more-toggle">Read More</h3>
 <div class="read-more-content">
  <div class="survey_text">
    Hidden text that is toggled open
  </div>
</div>

<script>
// Hide the extra content initially, using JS so that if JS is disabled, no problemo.
$('.read-more-content').addClass('hide');

// Set up the toggle.
$('.read-more-toggle').on('click', function() {
  $(this).next('.read-more-content').toggleClass('hide');
});
</script>   

Answer 1

Add the alternate text as a data- attribute:

<h3 class="read-more-toggle" data-alt-text="Read less">Read More</h3>

And get that text in your JS:

$('.read-more-toggle').on('click', function() {
    var element = $(this);
    var text = element.text();

    element
        .text( element.data('alt-text') )
        .data('alt-text', text)
        .next('.read-more-content').toggleClass('hide');
});