0

単純な非表示と表示機能がありますが、機能していません。任意の助けをいただければ幸いです

<head>
<script type="text/javascript">
$(function(){
$('a').click(function(){
var visible= false;         
if(visible){
$('div').hide('slow')           
}

else {
$('div').show('slow')           
}
visible=!visible;
})
})
</script>
</head>
<body>
<div style="background:#F00; width:500px; height:50px"></div>
<a href="#">hide</a>
<div class="append"></div>
</body>
4

4 に答える 4

4

イベント ハンドラのvisible 外側で宣言して初期化します。

var visible= false;  
$('a').click(function(){
   if(visible){
       $('div').hide('slow')           
   }
   else {
       $('div').show('slow')           
   }
   visible=!visible;
});

そうしないと、イベント ハンドラーが実行されるたびvisibleに初期化されるため、真になることはありません。false if(visible)

ただし、.toggle [docs]を使用して、追加のステータス変数を避けることもできます。

$('a').click(function(){
    $('div').toggle();         
});
于 2012-08-22T12:30:03.283 に答える
1

jQuery には組み込みの非表示/表示メソッド.toggle()があります。要素が非表示のときに要素を表示し、その逆も同様です。

于 2012-08-22T12:30:29.790 に答える
0

toggle代わりに使用してみてください。ここで 2 番目の例を確認してください。

http://api.jquery.com/toggle/

次に例を示します。

<!DOCTYPE html>
<html>
<head>
  <style>
    p { background:#dad;
        font-weight:bold;
        font-size:16px;
    }
  </style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <button>Toggle 'em</button>

  <p>Hiya</p>
  <p>Such interesting text, eh?</p>
  <script>
    $("button").click(function () {
      $("p").toggle("slow");
    });    
  </script>

</body>
</html>
于 2012-08-22T12:31:47.807 に答える
0

問題は次の行です。

var visible= false;         
if(visible){
    $('div').hide('slow')           
}

visibleこのコンテキストでは常に false になるため、div が非表示になることはありません。

于 2012-08-22T12:29:51.623 に答える