2

タイトルが示すように、私は JQuery プログラミングの初心者です。これは、私が設定した小さなテスト JSFiddle です。

http://jsfiddle.net/LQNmK/10/

 $(document).ready(function () {

     $("#testing1").show();
 });

 $(".testbutton").live("click", function () {
     $("#testing1 p").toggle("showorhide");
 });

ここでは、基本的に showorhide または div を行っています。

私の質問は、ボタンが非表示のときに表示するようにしたいということです。これを表示するための簡単な方法は何でしょうか?

4

6 に答える 6

3

最も簡単な方法は、コンテンツが表示されているかどうかを確認することです。

$(document).on("click", ".testbutton", function(ev) {
    var content = $("#testing1 p");
    content.toggle("showorhide");
    var text = content.is(":visible") ? "hide" : "show";
    $(this).val(text);
});

liveに変更（廃止）したことに注意してくださいon。

于 2013-03-04T16:28:45.230 に答える
1

あなたはこのようなことをすることができます：

 $(".testbutton").on("click", function () {
     $("#testing1 p").toggle("showorhide");
     $(".testbutton").text($('#testing1 p').is(':visible') ? 'Hide' : 'Show');
 });

指摘したように、jQueryの現在のバージョンから削除されているため、「ライブ」ではなく「オン」を使用してください

于 2013-03-04T16:28:01.177 に答える
1

使用する

var status = $("#testing1 p").is(":visible");
var btn  = $(".testbutton");
if(status === true) {
  btn.attr('value','hide');
} else {
btn.attr('value','show');
}

更新されたフィドル: http://jsfiddle.net/LQNmK/20/

于 2013-03-04T16:31:48.930 に答える
0 
  $(".testbutton").live("click", function () {
     $("#testing1 p").toggle("showorhide",function(){
         $(".testbutton").val($("#testing1 p").is(':visible')?'Hide':'Show');
     });
 });

http://jsfiddle.net/LQNmK/24/

于 2013-03-04T16:34:52.560 に答える
0

私は個人的に提案します：

$("#testing1").show();

$(".testbutton").on("click", function () {
    $(this).val(function (i, v) {
        return v.toLowerCase() == 'show' ? 'Hide' : 'Show';
    });
    $('#testing1 p').toggle();
});

JSフィドルデモ。

于 2013-03-04T16:35:06.867 に答える
0

私の提案は、2つのボタンを使用することです。1つはデフォルトで非表示になっ.toggle()ており、どちらかがクリックされると両方が非表示になります。これにより、どちらかのボタンをユーザーに表示する方法を簡単に調整できます。HTMLを変更し、JavaScriptはそのままにしておきます。

HTML：

<input class="testbutton btn" type="button" value="Hide"/>
<input class="testbutton btn" style="display:none" type="button" value="Show"/>

JS：

 $(".testbutton").on("click", function () {
     $('.testbutton').toggle(); // flip them both
     $("#testing1 p").toggle("showorhide");
 });

http://jsfiddle.net/mblase75/UeuQm/

于 2013-03-04T16:30:05.917 に答える