javascript - 使用 JavaScript 交换两个图像的位置

Question

所以我试图做到这一点，如果您单击按钮，它将切换图像位置。然而，它实际上并没有切换位置，而只是更改每个图像 ID 的 src。当您单击按钮一次时它会起作用，但之后图像不再切换。这是我的代码

function swapImages(){
    var image1 = document.getElementById("image1")
    var image2 = document.getElementById("image2")
    if (image1.src = '/jmurphy9/111/images/earthrise.jpg') {
        image1.src = '/jmurphy9/111/images/earth.jpg';
    } else {
        image1.src = '/jmurphy9/111/images/earthrise.jpg';
}
    if (image2.src = '/jmurphy9/111/images/earth.jpg') {
        image2.src = '/jmurphy9/111/images/earthrise.jpg';
}     else {
        image2.src = '/jmurphy9/111/images/earth.jpg';
}
}

function init(){
    var button1 = document.getElementById("btn1")
    button1.onclick = swapImages;
}

window.onload = init;

Answer 1

问题是src属性将具有图像的绝对路径，而不是您正在检查的相对路径

一种可能的解决方案是使用 .indexOf() ，如下所示

function swapImages() {
    var image1 = document.getElementById("image1")
    var image2 = document.getElementById("image2")
    if (image1.src.indexOf('/jmurphy9/111/images/earthrise.jpg')>-1) {
        image1.src = '/jmurphy9/111/images/earth.jpg';
    } else {
        image1.src = '/jmurphy9/111/images/earthrise.jpg';
    }
    if (image2.src.indexOf( '/jmurphy9/111/images/earth.jpg')>-1) {
        image2.src = '/jmurphy9/111/images/earthrise.jpg';
    } else {
        image2.src = '/jmurphy9/111/images/earth.jpg';
    }
}

<小时/>

或者您可以使用.getAttribute()

if (image1.getAttribute('src') == '/jmurphy9/111/images/earthrise.jpg') {
}

<小时/>

但是既然你想交换，你就可以这样做

function swapImages() {
    var image1 = document.getElementById("image1")
    var image2 = document.getElementById("image2")
    var src = image1.src;
    image1.src = image2.src;
    image2.src = src;
}

演示:Fiddle

<小时/>

注意:在您的 if 中条件您使用赋值( = )运算符而不是比较运算符( == )，所以 image1.src = '/jmurphy9/111/images/earthrise.jpg'在 if应该是image1.src == '/jmurphy9/111/images/earthrise.jpg'