我刚刚开始学习javascript。我想用下面的代码做的是当我单击带有 id 的图像时切换两个图像rockImg。
我用一条语句成功地将一个更改为另一个document.getElementById('rockImg').src = "rock_happy.png"；但无法通过单击图像来交换两个图像。
AFAIK，if-else语句语法没有任何错误；为了确保这一点，我参考了这个网站：https://msdn.microsoft.com/en-us/library/85yyde5c( v=vs.94) .aspx。
问题出在比较语句上吗？因为它只在运行时才能正常工作ocument.getElementById('rockImg').src = "rock_happy.png"，所以这是我能想到的唯一情况。
<html>
<head>
<title>iRock - The Virtual Pet Rock</title>
<script>
function change(){
// alert('yay! it changed!')
if(document.getElementById('rockImg').src == 'rock.png'){
document.getElementById('rockImg').src = "rock_happy.png";
}
else{
document.getElementById('rockImg').src = "rock.png";
}
}
</script>
</head>
<body>
<div style="margin-top:100px; text-align:center;">
<img id="rockImg" src="rock.png" alt="iRock" onclick="change()"/>
</div>
</body>
src 属性始终返回整个图像 URL，而不是相对路径，因此 if 条件始终会失败。
使用setAttributeandgetAttribute来获取准确的属性值
function change(){
var img = document.getElementById('rockImg');
if(img.getAttribute('src') == 'rock.png'){
img.setAttribute('src', "rock_happy.png");
}
else{
img.setAttribute('src', "rock.png");
}
}
您可以使用三元运算符代替语句来减少代码行数if...else。
function change(){
var img = document.getElementById('rockImg');
img.setAttribute('src',img.getAttribute('src') == 'rock.png' ? "rock_happy.png" : "rock.png");
}