現在我有四個影像動態呈現在 html 上。這是通過一個 onl oad 函式完成的。基本上，當我點擊這些輪子時，我希望影像改變大約一秒鐘然后回傳。但是現在只有一個輪子會變色，這很煩人。
function setWheels() {
document.querySelector(".blue-wheel").innerHTML = "<img src='blue-dark.svg.svg' onclick='buttonEvent()'>";
document.querySelector(".red-wheel").innerHTML = "<img src='red-dark.svg.svg' onclick='buttonEvent()'>";
document.querySelector(".green-wheel").innerHTML = "<img src='green-dark.svg.svg'>";
document.querySelector(".yellow-wheel").innerHTML = "<img src='yellow-dark.svg.svg'>";
}
function buttonEvent() {
if (document.querySelector(".blue-wheel")) {
document.querySelector(".blue-wheel").innerHTML = "<img src='blue-light.svg.svg'>";
setTimeout(setWheels, 800);
}
else if (document.querySelector(".red-wheel")) {
document.querySelector(".red-wheel").innerHTML =<img src='red-light.svg.svg'>";
setTimeout(setWheels, 800);
}
}
我沒有添加其他顏色的輪子，因為我確實預測它們會產生相同的效果。我確實相信 setTimeout 可能是我呼叫 setWheels 函式時的問題之一，但第一個 if 陳述句似乎是唯一一個即使我單擊另一個 div 也會改變顏色的陳述句。
uj5u.com熱心網友回復：
你的 if 陳述句沒有檢查任何有用的東西。if(document.querySelector(".blue-wheel"))只檢查該元素是否存在，而不是檢查里面的影像是否被點擊。
如果您想知道單擊了哪個影像，請將其作為引數傳遞給函式。
<img src='blue-dark.svg.svg' onclick='buttonEvent(this)'>
在您的 javascript 中，只需更改單擊的影像的 src，然后設定超時以將其更改回來。
function buttonEvent(e) {
e.src = e.src.replace('dark', 'light');
setTimeout(() => {e.src = e.src.replace('light', 'dark')}, 800);
}
如果您想在影像已經突出顯示時防止快速點擊（提高性能），您可以添加一個回傳：
function buttonEvent(e) {
if (!e.src.includes('dark')) return;
e.src = e.src.replace('dark', 'light');
setTimeout(() => {e.src = e.src.replace('light', 'dark')}, 800);
}
uj5u.com熱心網友回復：
你缺少一個“
.innerHTML =<img src='red-light.svg.svg'>";
應該
.innerHTML = "<img src='red-light.svg.svg'>";
uj5u.com熱心網友回復：
你可以使用一個變數（讓 x=0）來計算你在什么影像上。然后制作函式，它將看到 x = 0 的內容，因此它將顯示第一個影像，然后將一個添加到 x（如“x ”），但在顯示影像之前，您需要洗掉最后一個影像，因此您需要回圈影像（您可以為影像提供相同的類），例如“.forEach()”，在該函式中，您可以查看該影像是在頁面上還是顯示給用戶，然后將其洗掉，然后 x =1這種情況只顯示第二張影像，依此類推。您可以添加“if”陳述句來檢查“if x>=(image count)”，當發生這種情況時，只需“x=0”，它就會重置
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/366121.html
標籤：javascript html 前端
上一篇：僅排除一行中標志的中間ID