Question

我是编程傻瓜，

我所需要的就是能够切换两个图像，一个作为“上升状态”的图像。按钮，然后点击＆＃39;第二个图像出现并保持不变，直到再次点击它，然后由“＆n;”状态图像替换。

请不要嘲笑我这次可怜失败的可怜尝试。这是我的代码。

{{1}}

感谢您的期待。

Answer 1

检查this demo。

function change(image) {
   if (image.src.indexOf("imgd1.svg") > -1){
       image.src ="imgd1over.svg";
   }
   else{
       image.src ="imgd1.svg";
   }
}

在小提琴案例中，image.src不仅仅是图片的名称，还有完整的网址：http://fiddle.jshell.net/_display/imgd1.svg。所以我使用indexOf()检查图像的源是否构成了你想要的字符串。

此外，我已经改变了change()函数引用图像的方式：

 <img src ="imgd1.svg" name ="pic" id = "test" onclick ="change(this)"/>

使用change(this)会将自己的图像设置为事件的第一个参数，因此您无需在window对象或getElementById或其他事件中获取该图像。

Answer 2

function change() {
    var image = document.getElementById("test");
    if (image.src.indexOf("imgd1.svg") > -1 ){
        image.src = "imgd1over.svg";
    }
    else if(image.src.indexOf("imgd1over.svg") > -1 ){
        image.src = "imgd1.svg";
    }
}

Answer 3

以下是工作代码：

<img src ="imgd1.svg" name="pic" onclick="change();"/>

<script>
    function change() {
       if (window.document.pic.src == "imgd1.svg"){
           window.document.pic.src ="imgd1over.svg";
       }
       else if(window.document.pic.src == "imgd1over.svg"){
           window.document.pic.src ="imgd1.svg";
       }
    }
<script>

查看完整演示 http://jsfiddle.net/jswsze5q/

Answer 4

试试这个：

<script>
   function change() {
       var img1 = "imgd1.svg",
           img2 = "imgd1over.svg";
       var imgElement = document.getElementById('test');       
       imgElement.src = (imgElement.src === img1)? img2 : img1;
    }
</script>
<img src="imgd1.svg" id="test" onclick="change();"/>

示例：jsfiddle

Answer 5

尝试使用Jquery

var flag = 0;
function change(){
  if(flag){
    $("#img").attr("src","img1.png");
    flag = 0;
  }
  else{
    $("#img").attr("src","img2.png");
    flag = 1;
  }
}

最简单的切换选项其中变量flag充当标志，用于检测哪个图像处于活动状态 img是图片控件的id。

包含来自谷歌CDN的Jquery的代码

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

如何切换图像

5 个答案: