單擊時清除圖像（使用 HTML 和 Javascript 的顏色可視化器）
[英]Clearing Image on Click (Color Visualizer With HTML and Javascript)
問題描述
我創建了（在本網站成員的幫助下）一個金屬建築顏色可視化器，可以在這里找到。 出於某種原因，我無法附上代碼片段，但我在下面的評論中有完整代碼的鏈接。 一切正常，但有一個小故障。 當我從左到右點擊顏色時，我沒有問題。 但是當從右到左單擊顏色時，圖像層會停留在上一個圖像層之上。 有沒有辦法來解決這個問題？ 我的想法是當單擊色樣時，前一層將被清除。 我不確定這是否會奏效。 提前致謝。
1 個解決方案
解決方案1
0 已采納 2019-02-25 18:09:15
它只能從左到右工作而不是相反的原因是因為您的所有圖像元素都堆疊在一起。 因此，當您顯示一張圖像時，會阻止顯示其下的所有其他圖像。 您設置 html 的方式會阻止您正確使用切換來隱藏 div。
簡單的解決方案是在切換之前隱藏該圖像組（牆組、門組等）中的所有其他元素。 我添加了一些將圖像組合在一起的 div，當您單擊圖像時，它會抓取父 div，然后循環隱藏該圖像組中所有未單擊的圖像。 然后它會像平常一樣切換點擊的圖像。
這可能不是執行此操作的最佳方法。 理想情況下，我會重新設計 html 以使用每組只使用一個 div 並將圖像注入到 div 中。 但是，這應該適用於您的代碼結構。
<!DOCTYPE html> <html> <style> .mySlides { display: none; position: absolute; } .active { display: block; } </style> <script> var slideIndex = 1; function plusDivs(n) { showDivs(slideIndex += n); } function currentDiv(n) { showDivs(slideIndex = n); } function showDivs(n) { var i; var x = document.getElementsByClassName("mySlides"); var dots = document.getElementsByClassName("demo"); if (n > x.length) { slideIndex = 1 } if (n < 1) { slideIndex = x.length } var children = x[slideIndex - 1].parentElement.getElementsByTagName('img') var clickedElement = x[slideIndex - 1] for (var i = 0; i < children.length; i++) { if (children[i] != clickedElement) { children[i].classList.remove("active"); } } clickedElement.classList.toggle("active"); } </script> <body> WALL COLOR: <img onclick="currentDiv(1)" src="BAG.png" /> <img onclick="currentDiv(2)" src="BBS.png" /> <img onclick="currentDiv(3)" src="BCB.png" /> <img onclick="currentDiv(4)" src="BCG.png" /> <img onclick="currentDiv(5)" src="BHB.png" /> <img onclick="currentDiv(6)" src="BKB.png" /> <br> ROOF COLOR: <img onclick="currentDiv(7)" src="BAG.png" /> <img onclick="currentDiv(8)" src="BBS.png" /> <img onclick="currentDiv(9)" src="BCB.png" /> <img onclick="currentDiv(10)" src="BCG.png" /> <img onclick="currentDiv(11)" src="BHB.png" /> <img onclick="currentDiv(12)" src="BKB.png" /> <br> TRIM COLOR: <img onclick="currentDiv(13)" src="BAG.png" /> <img onclick="currentDiv(14)" src="BBS.png" /> <img onclick="currentDiv(15)" src="BCB.png" /> <img onclick="currentDiv(16)" src="BCG.png" /> <img onclick="currentDiv(17)" src="BHB.png" /> <img onclick="currentDiv(18)" src="BKB.png" /> <br> DOOR COLOR: <img onclick="currentDiv(19)" src="BAG.png" /> <img onclick="currentDiv(20)" src="BBS.png" /> <img onclick="currentDiv(21)" src="BCB.png" /> <img onclick="currentDiv(22)" src="BCG.png" /> <img onclick="currentDiv(23)" src="BHB.png" /> <img onclick="currentDiv(24)" src="BKB.png" /> <br> <div class="w3-content" style="max-width:800px;position: relative;"> <div class="wall-colors"> <img src="http://metaldepotinc.com/Canvas-Background.png" style="width:100%;position: absolute ;z-index:-1"> <img class="mySlides" src="http://metaldepotinc.com/WAG.png" style="width:100%"> <img class="mySlides" src="http://metaldepotinc.com/WBS.png" style="width:100%"> <img class="mySlides" src="http://metaldepotinc.com/WCB.png" style="width:100%"> <img class="mySlides" src="http://metaldepotinc.com/WCG.png" style="width:100%"> <img class="mySlides" src="http://metaldepotinc.com/WHB.png" style="width:100%"> <img class="mySlides" src="http://metaldepotinc.com/WKB.png" style="width:100%"> </div> <div class="roof-colors"> <img class="mySlides" src="http://metaldepotinc.com/RAG.png" style="width:100%"> <img class="mySlides" src="http://metaldepotinc.com/RBS2.png" style="width:100%"> <img class="mySlides" src="http://metaldepotinc.com/RCB.png" style="width:100%"> <img class="mySlides" src="http://metaldepotinc.com/RCG.png" style="width:100%"> <img class="mySlides" src="http://metaldepotinc.com/RHB.png" style="width:100%"> <img class="mySlides" src="http://metaldepotinc.com/RKB.png" style="width:100%"> </div> <div class="trim-colors"> <img class="mySlides" src="http://metaldepotinc.com/TAG.png" style="width:100%"> <img class="mySlides" src="http://metaldepotinc.com/TBS.png" style="width:100%"> <img class="mySlides" src="http://metaldepotinc.com/TCB.png" style="width:100%"> <img class="mySlides" src="http://metaldepotinc.com/TCG.png" style="width:100%"> <img class="mySlides" src="http://metaldepotinc.com/THB.png" style="width:100%"> <img class="mySlides" src="http://metaldepotinc.com/TKB.png" style="width:100%"> </div> <div class="door-colors"> <img class="mySlides" src="http://metaldepotinc.com/DAG.png" style="width:100%"> <img class="mySlides" src="http://metaldepotinc.com/DBS.png" style="width:100%"> <img class="mySlides" src="http://metaldepotinc.com/DCB2.png" style="width:100%"> <img class="mySlides" src="http://metaldepotinc.com/DCG2.png" style="width:100%"> <img class="mySlides" src="http://metaldepotinc.com/DHB.png" style="width:100%"> <img class="mySlides" src="http://metaldepotinc.com/DKB.png" style="width:100%"> </div> </div> <div class="as-console-wrapper"> <div class="as-console"></div> </div> </body> </html>
Javascript Color Visualizer - 多路徑和選擇有問題
[英]Javascript Color Visualizer - Having Issues with Multiple Paths and selections
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.