更改向上和向下箭頭與jquery

爲什麼不會這個jQuery更改我的圖像像我想要的向下箭頭？當用戶打開下拉菜單時，向上箭頭將變爲向下箭頭。我這樣做是因爲我不知道更簡單的方法，但它不起作用。無論我點擊多少次，箭頭都會保持整個時間。這裏是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; 
      } 
      });

來源

2012-02-14 Michael Rader

可能我們請參閱因爲你在你的函數clickhandler爲一個具有「無功達=真」，與這個jQuery – mcgrailm 2012-02-14 18:48:44

進入的HTML。當然是 – 2012-02-14 18:49:48

見.toggleClass()並設置一些CSS像這樣：

.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") 
}

確保您的HTML設置爲默認的箭頭方向，像這樣：

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

現在的JS改變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"); 
});

來源

2012-02-14 18:56:39 sinemetu1

美麗。這將更易於維護。 – Jordan 2012-02-14 19:00:06

這是一個很好的解決方案，但不是我想實現的一個。我只是通過聲明之外的變量來移動。謝謝.. +1 – 2012-02-14 19:13:49

@TommyCoffee不客氣。我建議實施這個答案的一個原因是因爲如果你想在其他地方使用相同的上/下圖像，它會更容易。然後，當您想要更改圖像時，即使走得更遠，您也只需要在CSS中的一個位置執行此操作。 – sinemetu1 2012-02-14 19:17:24

每次調用該函數時，它都會將var設置爲true。將進入本節每次

var up = true; 

    if (up == true) { 

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

來源

2012-02-14 18:50:27 Joelmob

！謝謝！我剛搬了這個變量。 – 2012-02-14 19:13:03

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

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

在你的CSS，默認添加的規則以展示下拉箭頭，在.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);}

很整齊。

來源

2012-02-14 18:55:04

非常感謝...我最終使用這個。 :) – 2012-02-14 19:33:53

很高興它幫助。將此標記爲答案如何？ ;） – 2012-02-14 22:55:48

<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是某事像這樣：

<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>

來源

2012-07-01 09:16:44

更改向上和向下箭頭與jquery

回答

相關問題