Question

我正在尝试使用我在此处发布的早期帖子中的某些人的代码，并在其中提供了jsFiddle，其中显示了如何在两个图像之间切换。

我正在尝试复制该人正在做的事情，但它似乎不适用于我的代码：

<!DOCTYPE html>
<html>
<head>

<script src="jquery.js"></script>

<script>

$('#ellomatey').toggle(
function(){
    $(this).attr('src', 'bgimage.png');
},
function(){
    $(this).attr('src', 'redsquare.png');
});

</script>

</head>

<body>
<img id="ellomatey"  src="bgimage.png"  />
</body>
</html>

有谁知道我做错了什么？我有一种感觉，它没有正确调用函数，但它似乎适用于那个人的例子。

Answer 1

另外两个答案谈论实际问题，但他们没有告诉你如何发现，这是调试发挥作用的地方。

console.log("before");
$('#ellomatey').toggle(
function(){
    console.log("bgimage"); $(this).attr('src', 'bgimage.png');
},
function(){
    console.log("redsquare"); $(this).attr('src', 'redsquare.png');
});
console.log("after");

如果你这样做，你会在你的控制台中注意到“之前”和“之后”。没关系。但是当点击图像时，您会期望其他控制台日志，这意味着切换功能没有按照您的想法执行。

您可以在某种程度上假设使用频繁的功能正常工作，因此选择器必须有一些功能。让我们检查一下。

console.log($('#ellomatey'));

嘿，什么？！没有元素。

然后你开始思考为什么然后你会发现你需要等到DOM加载;假设您在网页加载方式方面有一些基础背景，这是您正在做的事情的先决条件。

包装

$(document).ready(function() { ... });

就在那附近。

只需要一点理解和一些简单的调试输出......

不要只是盲目地编写假设它会起作用的代码，而是在你做的时候验证你的假设。

Answer 2

您需要将您的代码包装在document.ready调用中。你拥有它的方式代码将尝试在页面的实际内容加载之前运行。

<script>
$(document).ready(function() {
    $('#ellomatey').toggle(
    function(){
        $(this).attr('src', 'bgimage.png');
    },
    function(){
        $(this).attr('src', 'redsquare.png');
    });
});
</script>

Answer 3

您正在为文档中尚未存在的元素定义切换函数，因此您应该将js代码包装在window.load处理程序上（假设您要等待完整的图像加载）或document.ready事件

Answer 4

我创建了一个灵活的切换脚本：

jsBin demo

将第二张图片网址放入图片的data属性中：

<img id="ellomatey"  src="img_1.jpg" data-src="img_2.jpg" />

点击即可调用'swap'功能！

$(function(){  // BTW, you were just missing this 'ready' function :)

   function swap(){
       var mem  = this.src;
       this.src = $(this).data('src');
       $(this).data('src',mem);
   }    
   $('#ellomatey').click( swap );

});

此代码段还可以通过嵌套元素来处理多个元素：

 $('#ellomatey, .button, #something').click( swap );

（在演示中还添加了一个纯JS版本。玩得开心！）

点击即可切换两个图像

4 个答案:

jsBin demo