Javascript图像交换是't工作

Javascript image swap isn't working

本文关键字：工作 图像 交换 Javascript      更新时间：2023-09-26

这是我尝试用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>

src属性读取完整URL。相反，您可以维护一个变量，以便在两个图像之间进行交换。

<!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（而不是变量）属性中。

首先，您应该使用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> 后的"在此处输入代码"

您可以尝试测试url的最后一部分，如下所示：

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";
    }
}

注意：您需要转义匹配模式中的/字符。

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

编辑：

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

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

相关文章：