Fatal编程技术网
  • javascript/
  • Javascript 在单击时切换两个图像

Javascript 在单击时切换两个图像

javascript jquery

Javascript 在单击时切换两个图像,javascript,jquery,Javascript,Jquery,我试图使用我在这里发布的早期帖子中某人的代码，在其中，他提供了一个演示如何在两个图像之间切换的示例 我试图准确地复制那个人正在做的事情，但它似乎对我的代码不起作用： <!DOCTYPE html> <html> <head> <script src="jquery.js"></script> <script> $('#ellomatey').toggle( function(){ $(this).attr('s

我试图使用我在这里发布的早期帖子中某人的代码，在其中，他提供了一个演示如何在两个图像之间切换的示例

我试图准确地复制那个人正在做的事情，但它似乎对我的代码不起作用：

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


$（'ellomatey'）。切换(
函数（）{
$（this.attr（'src'，'bgimage.png'）；
},
函数（）{
$（this.attr（'src'，'redsquare.png'）；
});​
有人知道我做错了什么吗？我有一种感觉，它没有正确地调用函数，但它似乎适用于此人的示例。

您需要将代码包装到文档中。就绪调用。按照您的方式，代码将在加载页面的实际内容之前尝试运行

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


$（文档）.ready（函数（）{
$（'ellomatey'）。切换(
函数（）{
$（this.attr（'src'，'bgimage.png'）；
},
函数（）{
$（this.attr（'src'，'redsquare.png'）；
});​
});
您正在为文档中尚不存在的元素定义切换函数，因此您应该在
窗口中包装js代码。加载
处理程序（假设您想等待完整的图像加载）或在
文档中。就绪
事件其他两个答案讨论实际问题，但它们不会告诉你如何发现这一点，这就是调试发挥作用的地方


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");


如果您这样做，您将在控制台中注意到“before”和“after”。没关系。但是，当单击图像时，您可能会看到其他控制台日志，这意味着切换功能没有执行您认为它会执行的操作

您可以假设频繁使用的函数能够正常工作，因此选择器一定有问题。让我们检查一下


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


嘿，什么？！没有元素

然后你开始思考为什么，然后你会发现你需要等待DOM加载；假设你对网页的加载有一定的背景知识，这是你所做工作的先决条件

包装


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


它的周围就是这样

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


不要只是无意识地编写假设它会工作的代码，而是在执行时验证您的假设。
我创建了一个灵活的切换脚本：

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


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


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


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



（在演示中还添加了一个纯JS版本。祝您玩得开心！）
我认为如果您可以创建一个列表，然后删除第一个列表，将其添加到最后一个列表，并继续这样做，因为您可能有两个以上的图像，您仍然不必更改代码。因此在javascript中，您将拥有一个数组。

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