单击时使用 jQuery 更改 P 标签文本

Question

我正在对 expand/collapse 内容使用 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>

单击标题 class 时，将显示内容 class。希望 'Click here for more info...' 文本在单击时也更改为 'Click here for less info...'。

感谢您的帮助！

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

单击时使用 jQuery 更改 P 标签文本

Changing P tag text using jQuery on click

jquery

html

collapse

expand