0

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

3 回答 3

1

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当前可见的元素的属性（而不是变量）中维护它。

于 2013-08-22T14:30:48.500 回答
0

您可以尝试像这样测试 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";
    }
}

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

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

编辑 ：

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

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

于 2013-08-22T14:34:56.167 回答
0

首先，您应该使用 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>

于 2013-08-22T14:30:56.727 回答