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 demo

你可以：

创建一个var windowWidth
创建一个函数“changeImg()”，它将根据windowWidth var值处理转换。
我们在任何地方使用我们的函数changeImg()：我们也可以在$(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

function myAlert（）{alert（“heelo wrold”）};

$（。myImage）.setAttribute（“onclick”，“myAlert（）”）;

没试过，但似乎没错。〜奔

javascript：交换图片＆amp;的onClick

3 个答案:

jsBin demo