单击时 JQuery 更改文本（也更改回）答案

【问题标题】：JQuery change text on click (Also change back)单击时 JQuery 更改文本（也更改回）
【发布时间】：2014-01-30 14:47:11
【问题描述】：

我有一个 div，里面有一个 p，上面写着“折叠它！”。当我单击 div 时，p 的文本变为“展开它”。当我第二次单击 div 时，我该如何做到这一点，它会变回“折叠”？

HTML：

<div id="fold">
    <p id="fold_p">Fold it</p>
</div>

JQuery:

<script>
  $(document).ready(function () {
    $("#fold").click(function () {
      $("#fold_p").text("Expand it");
    } )
  } );                  
</script>

另外，是否有可能使过渡淡化？非常感谢任何帮助:)

【问题讨论】：

Button text toggle in jquery 的可能重复项

标签： jquery html text onclick click

【解决方案1】：

$(document).ready(function () {
    $("#fold").click(function () {
        $("#fold_p").fadeOut(function () {
            $("#fold_p").text(($("#fold_p").text() == 'Fold it') ? 'Expand it' : 'Fold it').fadeIn();
        })
    })
});

jsFiddle example

【讨论】：

哇，这很好用。但是，我可以指定淡出持续时间吗？
当然，只要将持续时间作为淡入淡出函数的第一个参数即可。见jsfiddle.net/j08691/BdQU2/2。例如：$("#fold_p").fadeOut(2000,function () {

【解决方案2】：

jQuery ("#fold")    .click (function () {
        if (jQuery (this).children ("#fold_p").text() == "Fold it") {
                jQuery (this).children ("#fold_p").text("Expand It");
        }
        else {
             jQuery (this).children ("#fold_p").text("Fold it");        
        }
    });

以上是您问题的示例代码。

这里是小提琴链接：http://jsfiddle.net/teZQA/

【讨论】：

【解决方案3】：

Fiddle Demo

$(document).ready(function () {
    var fold = $("#fold");
    fold.cliked = 1;// set initial click value to 1
    fold.click(function () {
    //change text o base of even or odd
        $("#fold_p").text((fold.cliked++ % 2 == 0) ? "Fold it" : "Expand it");
    });
});

【讨论】：

【解决方案4】：

试试这个：

<script>
$(document).ready(function () {
  $("#fold").click( function (){
    if($(this).hasClass("helperClass")){
     $(this).find("p").text("Expand it");

    }else{
      $(this).find("p").text("Fold it");
    }
    $(this).toggleClass("helperClass");
  });
});                  
</script>

【讨论】：