更改图像 onclick 然后在 js 中将其改回
[英]Changing image onclick then changing it back in js
问题描述
小提琴： https://jsfiddle.net/0r7v923u/2/
<img src="https://dirask.com/static/bucket/1631898942509-VMYrnXyYZv--image.png" class="logo" alt="Banner" onclick="ratesD(this)" />
记者：
function ratesD(image) {
if (img.attr('src') == "https://dirask.com/static/bucket/1631898942509-VMYrnXyYZv--image.png") {
image.src = "https://dirask.com/static/bucket/1633375165831-yjQ7G6WQeL--image.png";
} else {
image.src = "https://dirask.com/static/bucket/1631898942509-VMYrnXyYZv--image.png"
}
}
我只是想在点击时来回更改图像。 下面的 function 改变了它但没有返回到之前的图像：
function ratesD(image) {
image.src = 'https://dirask.com/static/bucket/1633375165831-yjQ7G6WQeL--image.png';
}
我认为它只需要改变使用img.attr('src') ==我需要为 if 条件改变什么？
2 条回复
1楼 Gihan 1 已采纳 2023-01-25 23:20:33
首先，您尝试访问图像 object 的错误属性（ attr而不是src ），第二个 function 在更改之前未检查当前图像源。 要解决此问题，function 应检查图像的当前 src 并根据其值将其更改为另一个 URL。 尝试这个。
function ratesD(image) { if (image.src == "https://dirask.com/static/bucket/1631898942509-VMYrnXyYZv--image.png") { image.src = "https://dirask.com/static/bucket/1633375165831-yjQ7G6WQeL--image.png"; } else { image.src = "https://dirask.com/static/bucket/1631898942509-VMYrnXyYZv--image.png" } }
<img src="https://dirask.com/static/bucket/1631898942509-VMYrnXyYZv--image.png" class="logo" alt="Banner" onclick="ratesD(this)" />
2楼 Mister Jojo 0 2023-01-25 23:45:07
每次单击图像时都强制加载/卸载图像（即使它们在系统缓存中）是个坏主意。
仅加载一次，并在每次单击时切换它们的显示。
const bannerImgs = document.querySelector('#banner-images'); bannerImgs.onclick =_=> bannerImgs.classList.toggle('seeOther');
#banner-images > img { width: 100px; height: 100px; } #banner-images.seeOther > img:first-of-type, #banner-images:not(.seeOther) > img:last-of-type { display: none; }
<div id="banner-images" > <img src="https://dirask.com/static/bucket/1631898942509-VMYrnXyYZv--image.png" alt="Banner" > <img src="https://dirask.com/static/bucket/1633375165831-yjQ7G6WQeL--image.png" alt="Banner" > </div>
问题未解决？试试以下方法：
更改字形和图像onclick
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.