Question

我有一个图标图像，通过此代码更改为另一个图像

<html>
<script>

function changeImg(thisImg) {
  if(prevImg) {
    prevImg.src=prevSrc;
  }  
  prevImg = thisImg;
  prevSrc = thisImg.src;
  thisImg.src = "flag_green.gif";
}
</script>
<body>
<img alt="" src="flag_blue.gif" id="imgClickAndChange" onclick="changeImg(this)"  />
</body>

但是在单击原始图像后，我无法再将其更改回上一张图像。请帮忙。我希望它类似于gmail重要的星形图标功能

Answer 1

为什么不这么简单呢？

function changeImg(thisImg) {
  if(thisImg.src == "flag_green.gif") {
    thisImg.src = "flag_blue.gif";
  } else {
    thisImg.src = "flag_green.gif";
  }
}

Answer 2

这可能有效：

var c = 0;
var images = ['src-for-first-image.jpg','src-for-second-image.jpg'];
$('.trigger').on('click', function() {
    $('.image').attr('src', images[c % images.length]);
    c++;
});

这可以让你循环浏览许多图像。

实施例： jsfiddle

Answer 3

试试这个：http://jsfiddle.net/pUbrv/

<script>
    var altImg = "http://ww1.prweb.com/prfiles/2011/10/12/8875514/star_white.jpg";
    var tmpImg = null;
    function changeImg(thisImg) {
      tmpImg = thisImg.src;
      thisImg.src = altImg;
      altImg = tmpImg;
    }
</script>

<body>
<img alt="" src="http://www.gettyicons.com/free-icons/136/stars/png/256/star_gold_256.png" id="imgClickAndChange" onclick="changeImg(this)" />
</body>

----------------- EDITED ----------------------

加载两个图像并切换可见性可能更容易，而不是更改单个img标记的src。

尝试类似http://jsfiddle.net/qXYGp/的内容：

<span onclick="toggleImg(this)">
    <img src="http://ww1.prweb.com/prfiles/2011/10/12/8875514/star_white.jpg" />
    <img src="http://www.gettyicons.com/free-icons/136/stars/png/256/star_gold_256.png" style="display: none"/>
</span>

和JS：

toggleImg = function(container) {
    var imgs = container.getElementsByTagName('img');
    for (i in imgs) {
        if (imgs[i].style.display == 'none')
            imgs[i].style.display = 'inline';
        else
            imgs[i].style.display = 'none';
    }
}

使用onclick使用类似于gmail星形图标的javascript多次更改图标

3 个答案: