不能得到jQuery的切換功能工作

Question

試圖交換兩個圖像取決於用戶點擊。

所以它應該隱藏用戶剛剛點擊過的圖像並顯示隱藏的圖像。

必須在這裏簡單的東西錯了......只要您指定的處理程序上.ready()

<!-- toggle for contrast buttons --> 
<script type=text/javascript> 
     $("a.contrast-button").click(function() { 
      $("a.contrast-button").toggle(); 
     }); 
</script> 



<div class="span-16 last" id="access-controls"> 
    <a class="contrast-button" id="switchDark" href="#"><img src="/static/images/contrast-dark.png" /></a> 
    <a class="contrast-button" id="switchRed" style="display:none;" href="#" ><img src="/static/images/contrast-light.png" /></a> 
    <a class="access-nav" href="#">contrast:</a> 
</div> 

Answer 1

工作。

例子：http://jsfiddle.net/6NvN8/

// v------ensures the DOM is ready before running code within 
$(function() { 
    $("a.contrast-button").click(function() { 
     $("a.contrast-button").toggle(); 
    }); 
}); 

如果你的代碼的順序是完全一樣的，你表現出來的問題，那麼元素還不jQuery代碼運行時存在。

如果你只是翻轉它，它也會使它工作。

例子：http://jsfiddle.net/6NvN8/1

<div class="span-16 last" id="access-controls"> 
    <a class="contrast-button" id="switchDark" href="#"><img src="/static/images/contrast-dark.png" /></a> 
    <a class="contrast-button" id="switchRed" style="display:none;" href="#" ><img src="/static/images/contrast-light.png" /></a> 
    <a class="access-nav" href="#">contrast:</a> 
</div> 


<!-- toggle for contrast buttons --> 
<script type=text/javascript> 
     $("a.contrast-button").click(function() { 
      $("a.contrast-button").toggle(); 
     }); 
</script> 

這是因爲該元素有機會你的腳本運行前加載。