Swapping the position of two images with JavaScrip

问题:

So i am trying to make it so if you click on the button it will switch the images placement. However it doesnt actually switch the placement but instead just changes the src of each image ID. It works when you click the button once, but after that the images no longer switch. This is my code

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;

回答1:

The problem is the src property will have the absolute path to the image, not relative one as you are checking

One possible solution is to use .indexOf() as given below

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';
    }
}

---

Or you can use .getAttribute()

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

---

But since you want to swap, you can just do

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

Demo: Fiddle

---

Note: In your if condition you are using assignment(=) operator instead of comparison operator(==), so image1.src = '/jmurphy9/111/images/earthrise.jpg' in the if should be image1.src == '/jmurphy9/111/images/earthrise.jpg'

回答2:

Looks like your equality operator is missing an extra "=" on your if's e.g. if(image1.src == '/jmurphy9/111/images/earthrise.jpg') so when it tries to evaluate the expression it never goes in so it changes the first time 'cause it goes to the else and from there on it just keeps going to the else so nothing happens.

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;

回答3:

The accepted answer, like yours, swaps the src attribute of the images.

Another method is to actually swap the img nodes themselves, which may be preferable if the images matter severally- eg., need special event handling or css considerations that depend on the actual image.

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);
}

note that you can always swap img nodes, or any two like nodes, but there are some nodes that cannot be swapped, because the container node of one will not accept the other as a child.

You can swap them if they make valid html.