Question

这是我在javascript中尝试过的第一件事，我不确定它为什么不起作用。目标是简单地在点击事件上来回交换图像。我想知道这是不是我的相关链接无法解决的问题。我直接从我在本网站上找到的另一个答案中复制了代码，因此错误可能很小。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script type="text/javascript">
    function swap248(){
        if(document.getElementById("normal248").src=="images/248img1.png"){
            document.getElementById("normal248").src="images/248img2.png";  
        }else if(document.getElementById("normal248").src=="images/248img2.png"){
            document.getElementById("normal248").src = "images/248img1.png";
        }
    }
</script>
</head>
<body>
    <img id="normal248" onclick="swap248()" src="images/248img1.png" width="294" height="461" alt=""/>
</body>
</html>

Answer 1

src属性读取完整网址。相反，您可以维护一个变量来交换两个图像。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script type="text/javascript">
    var isFirstImage = true; // by default first image is shown
    function swap248(){
        if(isFirstImage){ // shows second image
        document.getElementById("normal248").src = "images/248img1.png";
        isFirstImage = false;
        } else { // shows first image
        document.getElementById("normal248").src="images/248img2.png";
        isFirstImage = true;
        }
    }
</script>
</head>
<body>
    <img id="normal248" onclick="swap248()" src="images/248img1.png" width="294" height="461"  alt=""/>
</body>
</html>

注意：仅适用于非常基本的级别。如果要交换多个图像，可以将其保留在当前可见图像元素的data（而不是变量）属性中。

Answer 2

首先，您应该使用css来交换图像

在这种情况下，你甚至不需要javascript。

如果你愿意我可以给你看一个例子......

否则，如果你想使用javascript这里是你的功能，但更短一点

假设您的默认图片为images/248img1.png

function swap248() {
  var a = document.getElementById("normal248");
  a.x = '248img2' == a.x ? '248img1' : '248img2'; // short if
  a.src ='images/' + a.x + '.png';
}

这是如何运作的？

javascript中的每个元素都是一个对象。

因此，您可以向此对象添加变量。

在这种情况下，第一次检查失败，因为x未定义。

所以它返回false并给你第二张图片。

在下一个检查x中设置为第二个图像并返回第一个图像..

在</html>

之后删除'在此输入代码'

Answer 3

您可以尝试像这样测试网址的最后一部分：

function swap248(){
    if(document.getElementById("normal248").src.match(/images\/248img1.png$/g){
        document.getElementById("normal248").src="images/248img2.png";  
    }else if(document.getElementById("normal248").src.match(/images\/248img2.png$/g){
        document.getElementById("normal248").src = "images/248img1.png";
    }
}

警告：您需要在匹配模式中转义/字符。

并在末尾添加$以验证它是src的结尾。（即：.match(/images\/248img2.png$/g)）

编辑：

您可以尝试：.match(/t\/[0-9]{3}img1.png$/g)

[0-9]表示您正在搜索数字，{3}表示字符串必须在“img1”之前有3个数字才能匹配。

Javascript图像交换无法正常工作

3 个答案: