jquery - 用jquery改变html

Question

我需要使用 jquery 更改单击一个 div 中的文本。像这样：

$(document).ready(function() {
$("#hideall").click(function() {
$("#hideall").html("<p>SHOW</p>");
});
});

HTML是：

<div id="hideall" title="Hide all" name="Hide all">
<p>HIDE</p>
</div>

问题是，它应该像显示状态的 div，当它隐藏时，它显示

<p>SHOW</p>

当它显示出来时

<p>HIDE</p>

我意识到这应该与“if”函数一起使用，但不能分解它。有什么帮助吗？谢谢。

Answer 1

像这样的东西应该工作

$(document).ready(function() {
    $("#hideall").toggle(function() {
        $(this).text('HIDE');
    }, function() {
        $(this).text('SHOW');
    });
});

演示：http: //jsfiddle.net/UN76V/

Answer 2

或者您可以使用一个名为 hidden 的类来解决这个问题。

 $(document).ready(function() {
    $("#hideall").click(function() {
       if ($(this).is('.hidden') {
          $(this).removeClass('hidden').html("<p>SHOW</p>");
        } else {
          $(this).addClass('hidden').html("<p>HIDE</p>");
        }
    });
  });

Answer 3

您可以创建一个变量来检查此状态。

$(document).ready(function() {
var isHidden = false; 
$("#hideall").click(function() {
if(isHidden){
    $(this).html("<p>SHOW</p>");
    isHidden = false;
}
else{
   $(this).html("<p>Hidden</p>");
   isHidden = true;
}
});//end click function
});//end ready

Answer 4

试试这个

$(document).ready(function () {
  $("#hideall").on('click', function () {
    var $p = $(this).find('p');
    var txt = 'SHOW';
    if ($p.text() === 'SHOW') {
      txt = 'HIDE';
    }
    $p.text(txt);
  });
});

检查小提琴