javascript - javascript: 交换图片和点击

Question

<img src="logo.jpg" class="myImage" alt="Logotyp" />

这是我的 JavaScript 代码：

$(function() {
    var windowWidth = $(window).width();
    if (windowWidth <= 480) {
        $(".myImage").attr("src", "load.jpg");
    }
});

当窗口宽度 = 480 时，图像 logo.jpg 变为 load.jpg。工作正常。但我想要一个 onClick 功能，当您单击 load.jpg 时，它会再次变为 logo.jpg。似乎无法让它工作。建议？

Answer 1

$(".myImage").click(function(){
   $(this).attr("src"," logo.jpg"); 
});

Answer 2

jsBin 演示

你可以：

• 创建一个变量windowWidth
• 创建一个函数“ changeImg()”，它将根据windowWidthvar 值处理转换。
• 我们可以在任何我们想要的地方使用我们的函数changeImg()：我们也可以在 a 中执行它，$(window).resize()因此更改也将应用于手动调整大小。
• 比点击我们玩脏，我们欺骗 windowWidth 设置一个巨大的数字并调用我们的changeImg函数。乐趣。

jQuery：

$(function() {
  
  var windowWidth = $(window).width();
  
  function changeImg(){
     if (windowWidth <= 480) {
        $(".myImage").attr("src", "http://www.rockettheme.com/distribution/download/file.php?avatar=63759_1251026504.jpg");
     }else{
        $(".myImage").attr("src", "http://screenshots.en.sftcdn.net/blog/en/2009/12/2t_firefox-logo.jpg");
     }
  }
  changeImg();
  
  $(window).resize(function(){
    windowWidth = $(window).width(); // grab width while resizeing
    changeImg();
  });
  
  $('img[alt=Logotyp]').on('click', function(){
    windowWidth = 9876; // we fool the windowWidth
    changeImg();    // we play dead and call our function :D
  });
  
});

Answer 3

功能 myAlert() { alert("heelo wrold") };

$(.myImage).setAttribute ("onclick", "myAlert()");

没试过这个，但似乎是对的。〜本