Question

根据用户点击的图片尝试交换两张图片。

所以它应该隐藏用户刚刚点击的图像并显示隐藏的图像。

这里一定是个简单的错误...

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

只要您在.ready()上分配处理程序，就可以使用。

示例： 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>

这是因为元素有机会在脚本运行之前加载。

无法让jquery切换功能正常工作

1 个答案: