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

我的网站上有一个少读/多读切换开关。它工作得很好，但是当它打开时（文本没有隐藏），我希望链接文本“readmore”表示“readless”，我是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>   

始终可见的文本
阅读更多
切换为打开的隐藏文本
//最初使用JS隐藏额外的内容，这样如果禁用JS，就不会有问题。
$（'.read more content'）.addClass（'hide'）；
//设置切换。
$（'.read more toggle'）。打开（'单击'，函数（）{
$（this）.next（'.readmore content'）.toggleClass（'hide'）；
});

将替代文本添加为

数据-

属性：

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

---

使用jQuery text（）函数。虽然这是一个很好的解决方案，但我担心跨浏览器兼容性问题。@AshwinMukhija-没有问题。“在IE6上一直运行得很好。@joellustigman它实际上与它应该是的相反。当页面加载时，它说“阅读更多”，所有内容都显示出来；当我点击文本时，它说“阅读更少”，并隐藏内容。

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