0

クリック イベントで div を表示および非表示にしたいのですが、それを 1 つのボタンから実行したいと考えています。コードを書いていますが、うまくいきません。

<head>
   <script type="text/javascript" src="jquery.js"></script>
   <script type="text/javascript">
      $(function () {
         $('#clickme').click(function () {

            $('.mydiv').hide();
         })

         $('.clickme').click(function () {

            $('.mydiv').show();
         })
      })
   </script>
</head>
<body>
   <div class="mydiv">hiiiii</div>
   <input type="button" id="clickme" value="clickme" />
</body>
4

8 に答える 8

3

jQueryでクラス識別子とID識別子を混在させています。ボタンにはIDclickmeがあります。コンテンツを非表示にしている最初のコードでは、適切な方法でボタンを参照していますが、2番目のスクリプトでは、＃clickmeの代わりにクラス.clickmeを使用しています。

正しいですが、このスクリプトは非表示と表示を同時に行うため、何も起こらなかったかのように表示されます。

$(function(){ 
   $('#clickme').click(function(){ 
       $('.mydiv').hide(); 
   });

   $('#clickme').click(function(){ 
       $('.mydiv').show(); 
   }); 
});

より良いアプローチは、以下を使用することです。

$(function() {
    $("#clickme").click(function() {
        $(".mydiv").toggle();
    });
});

Binarousが指摘したように、最初のスクリプトは正しいものの、機能しません。非表示にする場合はカスタムクラスを適用し、表示する場合はそのクラスを使用するか、toggle（）関数を使用することをお勧めします。

于 2012-04-25T12:42:10.927 に答える
3

これを試して：

$('#clickme').click(function() {   // you're using an ID here!
    var div = $('.mydiv');

    if(div.is(":visible")) {
        div.hide();
    } else {
        div.show();
    }

});

ボタンに 2 つのイベント リスナーを追加しています。どちらもクリックで実行されるため、div が表示され、すぐに非表示になります。

于 2012-04-25T12:39:25.287 に答える
3

これを試して：

<head>

<script type="text/javascript" src="jquery.js"></script>

<script type="text/javascript">


$(function(){

$('#clickme').click(function(){

    if ($('.mydiv').is(":visible")) {
        $('.mydiv').hide();
    }
    else {
        $('.mydiv').show();
    }
}
)
})


</script>


</head>

<body>

<div class="mydiv">hiiiii </div>
<input type="button" id="clickme" value="clickme" />
</body>
于 2012-04-25T12:40:45.333 に答える
2

クラスを隠しているときはdivにクラスを追加し、表示しているときは削除し、何かをする前にチェックしてください。

このコードは機能します：

$(function(){
    $('#clickme').click(function(){

        if ($('.mydiv').hasClass("hidden")) $('.mydiv').removeClass("hidden").show();
        else $('.mydiv').addClass("hidden").hide();
    });
})

動作中の jsFiddle は次のとおりです: http://jsfiddle.net/V3gRH/

于 2012-04-25T12:44:17.067 に答える
1

HTML

<div id="divContent">Some content</div>
<input type="button" id="btnShow" value="Hide" />

脚本

$(function(){
    var isVisible=true;
    $("#btnShow").click(function(){
         if(isVisible)
         {
              $(this).val("Show")
              $("#divContent").hide();
         }
        else
        {
             $(this).val("Hide")
             $("#divContent").show();
        }
        isVisible=!isVisible;   
    });    
});

作業サンプルは次のとおりです：http：//jsfiddle.net/95vXQ/5/

編集 ： 

isVisible = !isVisible

上記の行は、以下のコードの簡略版です。

if(isVisible)
{
  isVisible =false;
}
else
{
 isVisible =true;
}
于 2012-04-25T12:45:30.197 に答える
1 
$(function(){
    $("#clickme").click(function(){
      var $mydiv = $(".mydiv");
        if ($mydiv.css("display")=="none"){
           $mydiv.show();   
        } else
        {
           $mydiv.hide();
        }
    });        
});​

-- デモを見る --

于 2012-04-25T12:50:17.350 に答える
0

これを試して：

$(function() {
    $('#clickme').click(function() {
        if ($('.mydiv').css('display') == "none") {
            $('.mydiv').show();
        } else {
            $('.mydiv').hide();
        }
    });
});
于 2012-04-25T12:49:10.227 に答える
0

非表示のチェックボックスを作成できます。
ボタンをクリックすると、checked-trueになります。ボタンをもう一度クリックすると、チェックされているかどうかがチェックされます（チェックされている場合-チェックを外します）..その後、別のIFを追加できます..ボタンをクリックすると、IFチェックボックスがチェックされている場合はチェックされます。そうでなければ隠す..

OMGチキディは自分をチェックしてください

$('#check').is(:checked) {...} $('#check').not(:checked) {...}

ばかだけどうまくいくかも！;D

于 2012-04-25T12:49:41.033 に答える