顯示/隱藏問題 Javascript function

Question

我祈禱有人可以幫助我顯示/隱藏 JavaScript function。

我正在為一個網站構建一個工具，它有一個房子的圖像和改變門顏色的按鈕，windows 等。

我遇到的問題是，當按下按鈕更改門的顏色時，window 等背景圖像中有一個白色的 flash。

原始圖像有白色門，windows 等所以我的 js function 在按下按鈕時循環通過門 alpha 圖像（divs）並更改為具有所選顏色的適當 div，但閃爍白色門的原始基本圖像（div）之間。

我需要擺脫這個白色 flash，這樣顏色就會很好地改變。

Ps 按下所有按鈕並更改所有顏色后，白色背景不再閃爍。 所以我的問題與 memory 有關？

D1 D2 D3 D4 D5 D6 D7 D8 D9 D10 D11 D12 D13

 let Buttons = document.querySelectorAll(".selectSection-door button"); for (let button of Buttons) { button.addEventListener('click', (e) => { const et = e.target; const active = document.querySelector(".active"); if (active) { active.classList.remove("active"); } et.classList.add("active"); let allContent = document.querySelectorAll('.content-door'); for (let content of allContent) { if (content.getAttribute('data-t') === button.getAttribute('data-t')) { content.style.display = "block"; } else { content.style.display = "none"; } } }); }

 .outer { margin: 100px; }.tool-image-container { border: 20px solid #969696; height: 700px; width: 933px; position: relative; margin: 0; }.base { height: 100%; width: 100%; position: absolute; left: 0; right: 0; opacity: 1; }.alpha { height: 100%; width: 100%; position: absolute; left: 0; right: 0; opacity: 1; z-index: 9; height: 700px; width: 933px; }.content-door { display: none; }

 <div class="tool-image-container"> <div class="base-div"> <img src="base.png" class="base"> </div> <div class="contentSection-door"> <div class="content-door" data-t="13"><img src="images/door/d13.png" class="alpha"></div> <div class="content-door" data-t="12"><img src="images/door/d12.png" class="alpha"></div> <div class="content-door" data-t="11"><img src="images/door/d11.png" class="alpha"></div> <div class="content-door" data-t="10"><img src="images/door/d10.png" class="alpha"></div> <div class="content-door" data-t="9"><img src="images/door/d9.png" class="alpha"></div> <div class="content-door" data-t="8"><img src="images/door/d8.png" class="alpha"></div> <div class="content-door" data-t="7"><img src="images/door/d7.png" class="alpha"></div> <div class="content-door" data-t="6"><img src="images/door/d6.png" class="alpha"></div> <div class="content-door" data-t="5"><img src="images/door/d5.png" class="alpha"></div> <div class="content-door" data-t="4"><img src="images/door/d4.png" class="alpha"></div> <div class="content-door" data-t="3"><img src="images/door/d3.png" class="alpha"></div> <div class="content-door" data-t="2"><img src="images/door/d2.png" class="alpha"></div> <div class="content-door" data-t="1"><img src="images/door/d1.png" class="alpha"></div> </div> <div class="selectSection-door"> <button type="button" data-t="1">D1</button> <button type="button" data-t="2">D2</button> <button type="button" data-t="3">D3</button> <button type="button" data-t="4">D4</button> <button type="button" data-t="5">D5</button> <button type="button" data-t="6">D6</button> <button type="button" data-t="7">D7</button> <button type="button" data-t="8">D8</button> <button type="button" data-t="9">D9</button> <button type="button" data-t="10">D10</button> <button type="button" data-t="11">D11</button> <button type="button" data-t="12">D12</button> <button type="button" data-t="13">D13</button> </div> </div>

Answer 1

快速解決問題的方法是用屬性選擇器替換循環：

 let Buttons = document.querySelectorAll(".selectSection-door button"); for (let button of Buttons) { button.addEventListener('click', (e) => { const et = e.target; const active = document.querySelector(".active"); if (active) { active.classList.remove("active"); } et.classList.add("active"); let activeDoor = document.querySelector('.activeDoor'); //Remove acrive class from door if(activeDoor){ activeDoor.classList.remove("activeDoor"); } console.log(et.dataset.t) //Use the data from the button as part of the attribute selector //Using the template litteral instead of concatenating document.querySelector(`[data-t='${et.dataset.t}'].content-door`).classList.add("activeDoor"); }); }

 .outer { margin: 100px; }.tool-image-container { border: 20px solid #969696; height: 700px; width: 933px; position: relative; margin: 0; }.base { height: 100%; width: 100%; position: absolute; left: 0; right: 0; /*Was blocking the buttons*/ top:20px; opacity: 1; }.alpha { height: 100%; width: 100%; position: absolute; left: 0; right: 0; opacity: 1; z-index: 9; height: 700px; width: 933px; }.content-door:not(.activeDoor) { display: none; }

 <div class="tool-image-container"> <div class="base-div"> <img src="base.png" class="base"> </div> <div class="contentSection-door"> <div class="content-door" data-t="13"><img src="images/door/d13.png" class="alpha"></div> <div class="content-door" data-t="12"><img src="images/door/d12.png" class="alpha"></div> <div class="content-door" data-t="11"><img src="images/door/d11.png" class="alpha"></div> <div class="content-door" data-t="10"><img src="images/door/d10.png" class="alpha"></div> <div class="content-door" data-t="9"><img src="images/door/d9.png" class="alpha"></div> <div class="content-door" data-t="8"><img src="images/door/d8.png" class="alpha"></div> <div class="content-door" data-t="7"><img src="images/door/d7.png" class="alpha"></div> <div class="content-door" data-t="6"><img src="images/door/d6.png" class="alpha"></div> <div class="content-door" data-t="5"><img src="images/door/d5.png" class="alpha"></div> <div class="content-door" data-t="4"><img src="images/door/d4.png" class="alpha"></div> <div class="content-door" data-t="3"><img src="images/door/d3.png" class="alpha"></div> <div class="content-door" data-t="2"><img src="images/door/d2.png" class="alpha"></div> <div class="content-door" data-t="1"><img src="images/door/d1.png" class="alpha"></div> </div> <div class="selectSection-door"> <button type="button" data-t="1">D1</button> <button type="button" data-t="2">D2</button> <button type="button" data-t="3">D3</button> <button type="button" data-t="4">D4</button> <button type="button" data-t="5">D5</button> <button type="button" data-t="6">D6</button> <button type="button" data-t="7">D7</button> <button type="button" data-t="8">D8</button> <button type="button" data-t="9">D9</button> <button type="button" data-t="10">D10</button> <button type="button" data-t="11">D11</button> <button type="button" data-t="12">D12</button> <button type="button" data-t="13">D13</button> </div> </div>

然而，這也可能是 CSS spriting 的主要候選者，因此值得對其進行調查。