比较图像的来源(If语句)

Question

因此，我正试图创建一个If语句来比较我的图像的来源，这样我就可以用相应的反转图像来更改它。

function changeBack() {
let image = document.getElementById('product__picture');  
console.log(image);
if(image.src === 'assets/red.jpg'){
image.src = ('assets/red-reversed.jpg');
console.log(image);
} else if(image.src === 'assets/orange.jpg'){
image.src = ('assets/orange-reversed.jpg');
}

HTML:

<article class="product">
<h2 class="hidden">Display Picture</h2>
<img id="product__picture" src="assets/red.jpg" alt="Laptop case">
</article>

这是我的点击按钮：

<article id="reverse">
<h2 class="subtitle">Select side</h2>
<div id="reverse__container">
<p id="front" class="reverse__text">Front</p>
<p id="back" class="reverse__text" onclick="changeBack();">Back</p>
</div>
</article>

Answer 1

您需要检查src属性，而不是对象。

顺便说一句，字符串不需要括号。

function changeBack() {
let image = document.getElementById('product__picture');
if (image.src === 'assets/red.jpg') {
image.src = 'assets/red-reversed.assets';
} else if (image.src === 'assets/orange.jpg') {
image.src = 'assets/orange-reversed.jpg';
}
}

Answer 2

比较图像的src属性，而不是图像对象本身！字符串属性周围也不需要额外的括号。此外，对于相同类型的相等性比较，请使用===而不是===。我几乎从不使用二重相等。

function changeBack() {
let image = document.getElementById('product__picture');  
if(image.src === 'assets/red.jpg'){
image.src = 'assets/red-reversed.assets'
} else if(image.src === 'assets/orange.jpg') {
image.src = 'assets/orange-reversed.jpg';
}
}