-2

我正在尝试使用我在此处发布的较早帖子中的某人的代码，在其中，他提供了一个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>

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

4

4 回答 4

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() { ... });

围绕它就是这样做的。

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

不要只是盲目地假设它会工作，而是在你做的时候验证你的假设。

于 2012-09-14T14:55:26.750 回答
0

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

jsBin 演示

将第二个图像 url放入图像的data属性中：

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

点击后只需调用“交换”功能！

$(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 版本。玩得开心！）

于 2012-09-14T17:25:13.020 回答
0

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

<script>
$(document).ready(function() {
    $('#ellomatey').toggle(
    function(){
        $(this).attr('src', 'bgimage.png');
    },
    function(){
        $(this).attr('src', 'redsquare.png');
    });​
});
</script>
于 2012-09-14T14:46:33.870 回答
0

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

于 2012-09-14T14:48:35.820 回答