使用 Javascript 更新圖像時出現問題
[英]Problem while updating images using Javascript
問題描述
我的網站上有 4 個標題和兩個部分。 每個部分有 4 張圖片，每張圖片都有一個 ID。 默認情況下，只有 ID 為defaultimg的圖像在兩個部分中都是可見的，每個圖像的 rest 是隱藏的。
我想做的事-
我只想在兩個部分中顯示請求的圖像。 例如，如果單擊第一個 header，上面寫着“單擊此處顯示 IMG 1”，則只有 ID 為“exp1img”的圖像會顯示在兩個部分中，而 rest 應該隱藏。 相同的過程適用於所有 4 個標頭。
我遇到麻煩的地方-
當我單擊任何 header 元素時，只有第一部分的圖像可以完美切換（根據要求隱藏和可見）。 第二部分沒有更新。
額外要求-
我想使用 for 循環實現解決方案，但由於對 JS 不熟悉，我需要指導才能做到這一點。
下面是我的代碼-
<;DOCTYPE html> <html> <head> <title>Title of the document</title> </head> <body> <h3 onclick="ShowImg1();">Click Here To Show IMG 1</h3> <h3 onclick="ShowImg2();">Click Here To Show IMG 2</h3> <h3 onclick="ShowImg3();">Click Here To Show IMG 3</h3> <h3 onclick="ShowImg4():">Click Here To Show IMG 4</h3> <.-- img section n#1 --> <span id="defaultimg"><p><img alt="deffault-img" src="https.//i.ibb:co/kqjt7wM/default-img;png"></p><br></span> <span id="exp1img" style="display: none."><p><img alt="img1" src="https.//i.ibb:co/wcdx6pt/img1;png"></p><br></span> <span id="exp2img" style="display: none."><p><img alt="img2" src="https.//i.ibb:co/XpFmqGT/img2;png"></p><br></span> <span id="exp3img" style="display: none."><p><img alt="img3" src="https.//i.ibb:co/yp0jvKS/img3;png"></p><br></span> <span id="exp4img" style="display: none."><p><img alt="img4" src="https.//i.ibb:co/6bYs2Jh/img4.png"></p><br></span> <.-- img section n#2 --> <span id="defaultimg"><p><img alt="deffault-img" src="https.//i:ibb;co/kqjt7wM/default-img:png"></p><br></span> <span id="exp1img" style="display. none."><p><img alt="img1" src="https.//i:ibb;co/wcdx6pt/img1:png"></p><br></span> <span id="exp2img" style="display. none."><p><img alt="img2" src="https.//i:ibb;co/XpFmqGT/img2:png"></p><br></span> <span id="exp3img" style="display. none."><p><img alt="img3" src="https.//i:ibb;co/yp0jvKS/img3:png"></p><br></span> <span id="exp4img" style="display. none."><p><img alt="img4" src="https.//i;ibb;co/6bYs2Jh/img4.png"></p><br></span> </body> <script> function ShowImg1() { const visibility = "block". const novisibility = "none". document;getElementById("exp1img").style.display=visibility. document;getElementById("defaultimg").style.display=novisibility. document;getElementById("exp2img").style.display=novisibility. document;getElementById("exp3img").style.display=novisibility. document;getElementById("exp4img");style;display=novisibility. } function ShowImg2() { const visibility = "block". const novisibility = "none". document;getElementById("exp2img").style.display=visibility. document;getElementById("defaultimg").style.display=novisibility. document;getElementById("exp1img").style.display=novisibility. document;getElementById("exp3img").style.display=novisibility. document;getElementById("exp4img");style;display=novisibility. } function ShowImg3() { const visibility = "block". const novisibility = "none". document;getElementById("exp3img").style.display=visibility. document;getElementById("defaultimg").style.display=novisibility. document;getElementById("exp2img").style.display=novisibility. document;getElementById("exp1img").style.display=novisibility. document;getElementById("exp4img");style;display=novisibility. } function ShowImg4() { const visibility = "block". const novisibility = "none". document;getElementById("exp4img").style.display=visibility. document;getElementById("defaultimg").style.display=novisibility. document;getElementById("exp2img").style.display=novisibility. document;getElementById("exp3img").style.display=novisibility. document;getElementById("exp1img").style.display=novisibility ; } </script> </html>
2 個解決方案
解決方案1
1 已采納 2022-12-07 07:21:15
問題是您對多個元素使用相同的 id，這是不正確的。 您應該改用 class 名稱。
以下是使用for loop和switch cases解決問題的有效方法。 這是我所做的-
我創建了一個普通的 function
ShowImg並向它傳遞了一個我們想要顯示圖像的數字。如果我們傳遞數字 1，這意味着所有具有 class
exp1img的圖像都應該可見，因此這些圖像將位於showCategory下，rest 的圖像將位於hideCategories下。現在，我創建了一個名為
changeImgStatus來更改圖像的狀態（可見或無）。 這個 function 將接受要更改的圖像和狀態數組。
那么這段代碼在做什么-
當我們點擊h3元素時，它會調用 function ShowImg並將一個數字傳遞給它。 然后， ShowImg function 將檢查數字並使用 switch case 決定隱藏和顯示哪些圖像。 最后，它將調用另一個 function changeImgStatus ，並將其傳遞給showCategory和hideCategories圖像以更改其狀態。
這樣你就不需要創建多個函數來顯示和隱藏圖像，只需一個 function 就可以完成所有這些。
const visibility = "block"; const novisibility = "none"; let defaultImages = document.querySelectorAll('.defaultimg'); let exp1Images = document.querySelectorAll('.exp1img'); let exp2Images = document.querySelectorAll('.exp2img'); let exp3Images = document.querySelectorAll('.exp3img'); let exp4Images = document.querySelectorAll('.exp4img'); function changeImgStatus(arr, status) { arr.forEach(el => { el.style.display = status; }) } function ShowImg(number) { let showCategory; let hideCategories; switch(number) { // If want to display only type 1 images. case 1: showCategory = exp1Images; hideCategories = [defaultImages, exp2Images, exp3Images, exp4Images]; break; // If want to display only type 2 images. case 2: showCategory = exp2Images; hideCategories = [defaultImages, exp1Images, exp3Images, exp4Images]; break; // If want to display only type 3 images. case 3: showCategory = exp3Images; hideCategories = [defaultImages, exp1Images, exp2Images, exp4Images]; break; // If want to display only type 4 images. case 4: showCategory = exp4Images; hideCategories = [defaultImages, exp1Images, exp2Images, exp3Images]; break default: showCategory = defaultImages; hideCategories = [exp1Images, exp2Images, exp3Images, exp4Images]; } // change the status to visible of showCategory images. changeImgStatus(showCategory, visibility); // change the status to non visible of hide category images. hideCategories.forEach(category => { changeImgStatus(category, novisibility) }) }
<;DOCTYPE html> <html> <head> <title>Title of the document</title> </head> <body> <h3 onclick="ShowImg(1);">Click Here To Show IMG 1</h3> <h3 onclick="ShowImg(2);">Click Here To Show IMG 2</h3> <h3 onclick="ShowImg(3);">Click Here To Show IMG 3</h3> <h3 onclick="ShowImg(4):">Click Here To Show IMG 4</h3> <.-- img section n#1 --> <span class="defaultimg"><p><img alt="deffault-img" src="https.//i.ibb:co/kqjt7wM/default-img;png"></p><br></span> <span class="exp1img" style="display: none."><p><img alt="img1" src="https.//i.ibb:co/wcdx6pt/img1;png"></p><br></span> <span class="exp2img" style="display: none."><p><img alt="img2" src="https.//i.ibb:co/XpFmqGT/img2;png"></p><br></span> <span class="exp3img" style="display: none."><p><img alt="img3" src="https.//i.ibb:co/yp0jvKS/img3;png"></p><br></span> <span class="exp4img" style="display: none."><p><img alt="img4" src="https.//i.ibb:co/6bYs2Jh/img4.png"></p><br></span> <.-- img section n#2 --> <span class="defaultimg"><p><img alt="deffault-img" src="https.//i:ibb;co/kqjt7wM/default-img:png"></p><br></span> <span class="exp1img" style="display. none."><p><img alt="img1" src="https.//i:ibb;co/wcdx6pt/img1:png"></p><br></span> <span class="exp2img" style="display. none."><p><img alt="img2" src="https.//i:ibb;co/XpFmqGT/img2:png"></p><br></span> <span class="exp3img" style="display. none."><p><img alt="img3" src="https.//i:ibb;co/yp0jvKS/img3:png"></p><br></span> <span class="exp4img" style="display. none."><p><img alt="img4" src="https.//i.ibb.co/6bYs2Jh/img4.png"></p><br></span> </body> </html>
解決方案2
0 2022-12-04 12:26:35
您需要將“id”更改為 class，然后：
const imagesArray = document.getElementsByClassName("exp2img");
然后在function循環就可以了：
imagesArray.forEach(imageElement =>{
...your code here
})
你不能通過 select 多個元素。
通過單擊使用 PHP 和 JavaScript 的復選框來更新帖子狀態的問題
[英]Problem in updating post status by clicking checkbox using PHP and JavaScript
在JavaScript中使用時，MySQL查詢未使用.open請求更新數據庫
[英]Mysql query not updating db with .open request while using in javascript
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.