当我单击img时,我想更改img源。 (当我单击img1时,我想看到img2。当我单击img2时,我想看到img3。等等。)
在发布自己之前,我已经检查了许多帖子。他们中的许多人提供了相同的答案。这是我的代码:
<article id="article"><h1 class="titre">ROADTRIP</h1>
<img id="roadtrip" src="img/roadtrip.jpg" alt="" onclick="clickimg()" />
<script>
function clickimg() {
if (document.getElementById("roadtrip").getAttribute('src')=='img/roadtrip.jpg')
{
document.getElementById("roadtrip").setAttribute('src') = 'img/roadtrip2.png';
}
else if (document.getElementById("roadtrip").getAttribute('src') == 'img/roadtrip2.png')
{
document.getElementById("roadtrip").src = 'img/roadtrip.jpg';
}
}
</script>
</article>
我的图像出现了,但是当我单击它时,什么也没发生
答案 0 :(得分:1)
答案 1 :(得分:1)
这里是有效代码,请使用.src
而不是.setAttribute
。
<article id="article"><h1 class="titre">ROADTRIP</h1>
<img id="roadtrip" src="https://spaceholder.cc/700x500" alt="" onclick="clickimg()" />
<script>
function clickimg() {
if (document.getElementById("roadtrip").getAttribute('src')=='https://spaceholder.cc/700x500')
{
document.getElementById("roadtrip").src = 'http://www.placebear.com/700/500';
}
else if (document.getElementById("roadtrip").getAttribute('src') == 'http://www.placebear.com/700/500')
{
document.getElementById("roadtrip").src = 'https://spaceholder.cc/700x500';
}
}
</script>
</article>
答案 2 :(得分:1)
正如我在评论中所说,您不应将数据存储在DOM中。这样做太复杂,难以维持的噩梦,执行起来也很慢。而是将图像地址存储到JS数组中,并保留用于显示图像的索引簿,如下所示:
在HTML中,传递事件对象:onclick="clickimg(event)"
,或者在脚本中添加事件侦听器:
const imgs = [
'img/image1.jpg',
'img/image2.jpg',
'img/image3.jpg'
];
let index = 0;
document.getElementById('roadtrip').addEventListener(
'click', clickimg // If you'll do this, remove the onclick attribute from the img tag
);
function clickimg (e) {
e.target.src = imgs[index]; // Change the src of the clicked image
index = ++index % imgs.length; // Increase index, shows the first image when the length of the array is reached
}
这样,图像地址易于维护,如果需要更多图像,只需将地址添加到imgs
数组中即可。或者,您也可以只通过操作数组来更改或删除某些图像。
答案 3 :(得分:0)
您应该
document.getElementById("roadtrip").setAttribute('src', SRC_Value);
或:
document.getElementById("roadtrip").src = SRC_Value;
请参见下面的代码段!
var src1 = "https://developer.chrome.com/extensions/examples/api/extension/isAllowedAccess/sample-128.png"
var src2 = "https://static.wixstatic.com/media/0ca0ca_b9a2fe29d4be46179bea5a20ae7afd12~mv2.png/v1/fill/w_672,h_316,al_c,q_80,usm_0.66_1.00_0.01/png-sample-1.webp"
function clickimg() {
if (document.getElementById("roadtrip").getAttribute('src')=== src1)
{
document.getElementById("roadtrip").setAttribute('src', src2);
}
else if (document.getElementById("roadtrip").getAttribute('src') === src2)
{
document.getElementById("roadtrip").src = src1;
}
}
<article id="article"><h1 class="titre">ROADTRIP</h1>
<img id="roadtrip" src="https://developer.chrome.com/extensions/examples/api/extension/isAllowedAccess/sample-128.png" alt="" onclick="clickimg()" />
</article>
答案 4 :(得分:0)
如其他规定,您必须将表达式的RHS作为setAttribute中的第二个参数。另外,您是否检查过是否要进入if条件块来设置属性值? 可能是您的条件都不返回true的情况,您可能必须使用indexOf或相对图像路径来进行完全匹配。