不能得到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> 

这是因为该元素有机会你的脚本运行前加载。