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

Changing icon multiple times using onclick using javascript similar to gmail star icon

本文关键字：图标 类似于 javascript gmail 星星 使用 onclick 改变      更新时间：2023-09-26

我有一个图标图像，通过以下代码变成另一个图像

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

为什么不用简单的方法呢?

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

这可能行得通:

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

试试: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';
    }
}
相关文章：