Question

我试图在我的网页中交换两个imgs并且无法解决为什么这段代码无法正常工作。任何帮助将不胜感激。

这是在HTML文件中：

data-ng-model="nameselect.address"

虽然这是一个单独的javascript文件：

<img onclick="swap(); "src="LaptopThin.jpg" id="LaptopPicture" />

我将代码更改为：

 function swap()
  {
     var picture = document.getElementById('LaptopPicture').src;
     if (picture === 'LaptopThin.jpg') {
         picture.src = 'ServerRack.jpg';
     } else {
         picture.src = 'LaptopThin.jpg';
     }

并且html文件中的图片仍然没有变化。 img停留在Laptopthin.jpg

Answer 1

您无法设置src的{{1}}属性，因为您已将picture设置为元素的picture属性。

更改这些行：

src

到这些：

var picture = document.getElementById('LaptopPicture').src;
if (picture === 'LaptopThin.jpg') {

Answer 2

这是因为src属性将给出图像源的绝对值，而不仅仅是src属性设置的值

function swap() {
    var picture = document.getElementById('LaptopPicture');
    if (picture.src.indexOf('LaptopThin.jpg') > -1) {
        picture.src = 'ServerRack.jpg';
    } else {
        picture.src = 'LaptopThin.jpg';
    }
}

尝试的另一个选择是使用getAttribute

function swap() {
    var picture = document.getElementById('LaptopPicture');
    if (picture.getAttribute('src')== 'LaptopThin.jpg') {
        picture.src = 'ServerRack.jpg';
    } else {
        picture.src = 'LaptopThin.jpg';
    }
}

用函数交换img src（JavaScript）

2 个答案: