单击时使用jQuery更改P标签文本[重复]

Question

我正在使用 P 标签来展开/折叠内容，我的代码目前正在为此工作。但我也希望在单击时更改该 P 标签文本。最好的方法是什么？

这是我的代码：

jQuery

<script type="text/javascript">
    jQuery(document).ready(function() {
        jQuery(".content").hide();
        //toggle the componenet with class msg_body
       jQuery(".heading").click(function() {
           jQuery(this).next(".content").slideToggle(500);
       });
    });
</script>

HTML

 <p class="heading">Click here for more info...&nbsp;</p>
 <div class="content">
      <span style="font-size: 14px; color: rgb(6, 78, 137);">
          <b>Documents Required</b>
       </span>
 </div>

单击标题类时，会显示内容类。想要在单击时将“单击此处获取更多信息...”文本更改为“单击此处获取更少信息...”。

感谢您的帮助！

Answer 1

一个完整的例子来做你所要求的：

// This extends jQuery's functions and adds a toggleText method.
jQuery.fn.extend({
    toggleText:function(a,b){
        if(this.html()==a){this.html(b)}
        else{this.html(a)}
    }
});

jQuery(document).ready(function() {
    jQuery('.heading').click(function() {
        jQuery(this).toggleText('My first text','My second text');
        jQuery(this).next(".content").slideToggle(500);
    });
});