0

div が非表示ticketSearchTitleのときに、h2 タイトルのテキストの色を id で変更しようとしています。ticketSearchしかし、私がそれを行うために使用しているコードは、それを完全に壊しているようです(つまり、タイトルにポインターアイコンがなく、divを非表示にできません)。

分割構造:

  <h2 id="ticketSearchTitle" >SEARCH</h2>
  <div id="ticketSearch"><div>

完全なコード:

$("h2#ticketSearchTitle").css({'cursor':'pointer', 'display':'inline'});

  $("h2#ticketSearchTitle").click(function(){

      $("#ticketSearch").toggle('slow');

       //change h2 text to show that is is inactive
       if ($("h2#ticketSearch").is(':hidden')){
          $("#ticketSearchTitle").css('color','#D3D3D3')
      }

  });

コードを壊す JQuery スニペット:

 //change h2 text to show that is inactive
       if $("h2#ticketSearch").is(':hidden'){
          $("#ticketSearchTitle").css('color','#D3D3D3')
      }
4

3 に答える 3

2

あなたは2つのことを忘れています

1) if を括弧で囲むのを忘れた

      if ($("h2#ticketSearch").is(':hidden')){

2）あなたticketSearchはdivではなくaですh2

       if $("h2#ticketSearch").is(':hidden'){ //wrong
       if $("div#ticketSearch").is(':hidden'){ //correct

JSFIDDLE: http://jsfiddle.net/KKgTU/4/

于 2013-03-29T04:22:53.647 に答える
2

のブラケットを追加するのを忘れましたかif

if ($("h2#ticketSearch").is(':hidden')){
于 2013-03-29T04:11:15.240 に答える
2

これら 2 つのシーケンスを続けて実行すると、トグルがアニメーションを開始するだけで、要素が非表示になっているかどうかをすぐに確認してもアニメーションが終了しないため、問題が発生します。

$("#ticketSearch").toggle('slow');

//change h2 text to show that is is inactive
if ($("h2#ticketSearch").is(':hidden')){
   $("#ticketSearchTitle").css('color','#D3D3D3')
}

いくつかのオプションがあります。アニメーションの前に非表示になっているかどうかを確認し、アニメーション前の値に基づいて操作することができます (トグルされることがわかっています)。または、実際のアニメーションと完了関数を使用して、トグルが完了したときにのみ残りのコードが実行されるようにすることもできます。

たとえば、アニメーションの終了後にコードの 2 番目の部分を実行する場合は、次のようにします。

$("#ticketSearch").toggle('slow', function() {
    //change h2 text to show that is is inactive
    if ($("#ticketSearch").is(':hidden')){
       $("#ticketSearchTitle").css('color','#D3D3D3')
    }
});

"h2#ticketSearch"参考までに、セレクターとして 使用する理由はありません。"#ticketSearch"の方が高速で、同じ結果が生成されます。

于 2013-03-29T04:11:45.350 に答える