jqueryで上矢印と下矢印を変更する

Question

なぜこのjQueryは自分のイメージを下矢印に変えないのですか？ユーザーがドロップダウンを開くと、上矢印が下矢印に変わります。私はもっ​​と簡単な方法を知らないので、私は他の人と一緒にこれをやっていますが、うまくいきません。どのくらい何回クリックしても、矢印は時間全体にとどまります。ここにjQueryがあります。必要なものすべてでなければならない。ありがとう！

$("h3#mpcClients").click(function() { 
      $("#hidden0").slideToggle(500); 

      var up = true; 

      if (up == true) { 

      $("td h3").css("background-image", "url(http://www.crm-newsletter.com/client-emails/images/arrowDown.png)"); 
      up=false; 
      } 
      else if(up == false) { 
       $("td h3").css("background-image", "url(http://www.crm-newsletter.com/client-emails/images/arrowUp.png)"); 
      up=true; 
      } 
      }); 

Answer 1

.toggleClass()を参照し、いくつかのCSSので、同じように設定要素のCSSクラス：

$("h3#mpcClients").click(function() { 
     $("#hidden0").slideToggle(500); 

     // This adds a class if the element doesn't already have it 
     // if the element already has the class it will remove it. 
     $("td h3").toggleClass("up down"); 
}); 

Answer 2

関数が呼び出されるたびに、varがtrueに設定されます。 これはデフォルトで下矢印を示すために、それに応じた背景矢印画像を設定.upためのルールでルールを追加し、この句毎回あなたのCSSの

var up = true; 

    if (up == true) { 

    $("td h3").css("background-image", "url(http://www.crm-newsletter.com/client-emails/images/arrowDown.png)"); 
    up=false; 
    } 

Answer 3

$("h3#mpcClients").click(function() { 
      $("#hidden0").slideToggle(500); 

      $("td h3").toggleClass('up'); 
}); 

に入ります。

td h3 { background-image : url(http://www.crm-newsletter.com/client-emails/images/arrowDown.png);} 

td h3.up { background-image : url(http://www.crm-newsletter.com/client-emails/images/arrowUp.png);} 

多かれ少なかれ、 JSは、変更するための今すぐ

<td> 
    <h3 class="up">Some text</h3> 
</td> 

：あなたがそうのように、デフォルトの矢印の方向にHTMLを設定していることを確認し

.up { 
    background-image: url("http://www.crm-newsletter.com/client-emails/images/arrowDown.png") 
} 
.down { 
    background-image: url("http://www.crm-newsletter.com/client-emails/images/arrowDown.png") 
} 

：

Answer 4

<script type="text/javascript"> 
function slideT(id) 
{ 

    var n=id.split(" "); 
    $('#panel'+n[1]).slideToggle('fastest'); 

    if(n[2]=='up') 
    { 
     $('#img'+n[1]).find('img').remove(); 

     $('#img'+n[1]).find('td').append('<img src="../images/down.png" id="'+n[0]+' '+n[1]+' down" style="float:left" onclick="slideT(this.id)" >'); 

    } 
    else 
    { 
     $('#img'+n[1]).find('img').remove(); 
     $('#img'+n[1]).find('td').append('<img src="../images/up.png" id="'+n[0]+' '+n[1]+' up" style="float:left" onclick="slideT(this.id)" >');   
    }  
} 
</script> 

この回答はウルテーブルパネルは、そのHTMLをWICH開きますが、このようなSTHです：

<tr style="cursor: pointer" id="img"> 
     <td align="center">&nbsp;<?=$value?><img src="../images/down.png" style="float: left;" id="slide>" onclick="slideT(this.id)"></td> 
    </tr> 

<table class="list_row_container" style="display: none;" id="panel"> 
</table>