0

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

<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 重要的星形图标功能

4

3 回答 3

1

这可能有效：

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

于 2013-05-07T08:27:45.960 回答
1

为什么不做简单的方法呢？

function changeImg(thisImg) {
  if(thisImg.src == "flag_green.gif") {
    thisImg.src = "flag_blue.gif";
  } else {
    thisImg.src = "flag_green.gif";
  }
}
于 2013-05-07T08:17:49.160 回答
0

试试这个：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>

----------------- 已编辑 ----------------------

加载两个图像并切换可见性可能比更改单个 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';
    }
}
于 2013-05-07T09:37:30.573 回答