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'

Answer 2

看起来你的等号运算符在你的if上缺少额外的“=”如果（image1.src == '/ jmurphy9/111/images/earthrise.jpg'）所以当它试图评估表达式时它永远不会进入所以它会在第一次改变时因为它转到其他的，从那里开始只是继续前进，所以没有任何事情发生。

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 3

接受的答案与您的一样，会交换图像的src属性。

另一种方法是实际交换img节点本身，如果图像分别重要 - 例如，需要特殊的事件处理或依赖于实际图像的css考虑因素，这可能是更好的。

function swapNodes(a, b){
    var p= b.parentNode, sib= b.nextSibling;
    if(sib=== a) sib= sib.nextSibling;
    a.parentNode.replaceChild(b, a);
    return sib? p.insertBefore(a, sib): p.appendChild(a);
}

请注意，您可以随时交换img节点或任何两个节点，但有些节点无法交换，因为一个节点的容器节点不会接受另一个作为子节点。

如果他们制作有效的HTML，你可以交换它们。

用JavaScript交换两个图像的位置

3 个答案: