我正在尝试使用代码将显示的图像路径与独立于url的相对路径进行比较，但.pathname不起作用
<html>
<head>
<title>change images</title>
<script>
var img=document.getElementById('img').src;
function change(){
if(img.pathname='img1.png'){
var next='img2.png';
document.getElementById('btn').innerHTML='img2.png';
}else if(img.pathname='img2.png'){
var next='img1.png';
document.getElementById('btn').innerHTML='img1.png';
}else{
document.getElementById('btn').innerHTML='error';
}
document.getElementById('img').src=next;
}
</script>
</head>
<body>
<img id='img' src="img1.png">
<button id='btn' onclick="change()">change</button>
</body>
<html>
在控制台上它'说'img不是一个对象
我试图寻找img.pathname返回的内容并返回undefined
路径名不是图像元素的属性。从查看代码可以清楚地看到，您只需要图像的文件名，而不需要路径。这将为你做到这一点......
function change() {
// get everything after the last / in the image src attribute
var current = document.getElementById('img').src.split("/").slice(-1);
if (current == 'img1.png') {
var next = 'img2.png';
document.getElementById('btn').innerHTML = 'img2.png';
}
else if (current == 'img2.png') {
var next = 'img1.png';
document.getElementById('btn').innerHTML = 'img1.png';
}
else {
document.getElementById('btn').innerHTML = 'error';
}
document.getElementById('img').src = next;
}
它将/的每个实例的图像src属性分割成一个数组，然后slice将它剪切到特定的索引，在这种情况下是最后一个元素，这就是你得到的全部。
另外，请注意在比较值时使用==。如果你有...
if (current = "something)
然后它实际上将当前设置为值“某事”（因为单个=）并且if语句的计算结果为true。
我找到了另一种解决方案，使用indexOf()在.src字符串中搜索图像名称。
<script>
function change(){
var img=document.getElementById('img').src;
if (img.indexOf('img1.png')!= -1){
var next='img2.png';
} else if (img.indexOf('img2.png')!= -1) {
var next='img1.png';
} else {
document.getElementById('btn').innerHTML='else';
}
document.getElementById('img').src=next;
document.getElementById('btn').innerHTML=next;
}
</script>