0

jqueryで1つの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」関数で動作するはずですが、分解できません。何か助けはありますか？ありがとう。

4

4 に答える 4

4

このようなものが動作するはずです

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

デモ: http://jsfiddle.net/UN76V/

于 2013-01-15T01:56:50.917 に答える
0

これを試して

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

フィドルをチェック

于 2013-01-15T01:59:49.623 に答える
0

この状態をチェックする変数を作成できます。

$(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
于 2013-01-15T01:59:18.500 に答える
0

または、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>");
        }
    });
  });
于 2013-01-15T01:57:34.100 に答える