單擊其他元素時從元素中刪除類

Question

我有一個粘性導航欄，其中包含 4 個帶有 .menu-container 類的 div。 這些 div 中的每一個都包含一個圖像、一個文本和一個具有 .rectangle 和 .hidden 類的 div。 基本上，我的目標是在單擊 .menu-container 的特定元素時刪除類 .hidden 。 我嘗試了不同的方法來刪除課程。 其中之一是添加 rectangle[el].classList.remove('hidden') 但我得到未定義，奇怪的是矩形出現在瀏覽器中，但是當我在控制台中檢查時，我得到這個錯誤'未捕獲'。 這是清楚的代碼：

 "use strict"; const rectangle = document.querySelectorAll(".rectangle"); window.addEventListener('DOMContentLoaded', event => { document.querySelectorAll('.menu-container').forEach(el => el.addEventListener('click', event => { rectangle.classList.remove('hidden'); console.log('clicked'); } ) ) })

 .sticky { display: flex; justify-content: center; flex-shrink: 1; min-height: 70px; padding: 0 287px 0; box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.22); background-color: $light--black; // align-items: center; // align-items: stretch; .menu-container { display: inline-flex; flex-direction: column; align-items: center; &:hover { .text-sticky { color: white; } .icon-coffee--grey { display: none; } .icon-coffee--white { display: block; } .icon-capsules--grey { display: none; } .icon-capsules--white { display: block; } .icon-mousse--grey { display: none; } .icon-mousse--white { display: block; } .icon-machines--grey { display: none; } .icon-machines--white { display: block; } } @include between(1, 3) { position: relative; &::after { content: ""; position: absolute; width: 0.5px; right: -3px; min-height: 41px; background-color: $white; top: 50%; transform: translate(-50%, -50%); } } .icon-coffee { width: 44px; height: 18px; // margin: 7px 76px 5px 77px; margin: 18px 77px 5px; } .icon-coffee--white { display: none; } .icon-capsules { width: 49px; height: 14px; // margin: 8px 72px 8px 75px; margin: 19px 74px 8px; } .icon-capsules--white { display: none; } .icon-mousse { width: 25px; height: 24px; margin: 13px 86px 4px; } .icon-mousse--white { display: none; } .icon-machines { width: 15px; height: 26px; margin: 11px 91px 4px; } .icon-machines--white { display: none; } .text-sticky { font-size: 12px; min-height: 16px; font-family: "NespressoLucas-SemiBd"; margin: 0 0 9px 0; line-height: 1.33; letter-spacing: 0.34px; text-transform: uppercase; color: grey; text-align: center; } .rectangle { width: 100%; height: 4px; background-color: $brown; } .hidden { display: none; } } }

 ... <div class="sticky"> <div class="menu-container"> <a class="coffee-icon" href=""> <img class="icon-coffee icon-coffee--grey" src="assets/icon-coffee-grey.svg" alt=""> <img class="icon-coffee icon-coffee--white" src="assets/icon-coffee-white.svg" alt=""> </a> <p class="text-sticky">les cafés</p> <div class="rectangle hidden"></div> </div> <div class="menu-container"> <a class="capsules-icon" href=""> <img class="icon-capsules icon-capsules--grey" src="assets/icon-capsules-grey.svg" alt=""> <img class="icon-capsules icon-capsules--white" src="assets/icon-capsules-white.svg" alt=""> </a> <p class="text-sticky">les capsules</p> <div class="rectangle hidden"></div> </div> <div class="menu-container"> <a class="mousse-icon" href=""> <img class="icon-mousse icon-mousse--grey" src="assets/icon-mousse-grey.svg" alt=""> <img class="icon-mousse icon-mousse--white" src="assets/icon-mousse-white.svg" alt=""> </a> <p class="text-sticky">les technologies</p> <div class="rectangle hidden"></div> </div> <div class="menu-container"> <a class="machines-icon" href=""> <img class="icon-machines icon-machines--grey" src="assets/icon-machines-grey.svg" alt=""> <img class="icon-machines icon-machines--white" src="assets/icon-machines-white.svg" alt=""> </a> <p class="text-sticky">les machines</p> <div class="rectangle hidden"></div> </div> </div> <script src="script.js"></script> </body> </html>

Answer 1

使用 jQuery 下一個應該可以工作。 ✌️

具體代碼：

$('.menu-container').click(function() {
    $(this).find('.hidden').removeClass('hidden');
});

我們用 click 函數檢查哪個元素被點擊了。 $(this)指的是已單擊的特定元素。 然后我們將尋找隱藏的類.find('.hidden')並將其刪除。 🥳

運行代碼片段：

 $('.menu-container').click(function() { $(this).find('.hidden').removeClass('hidden'); });

 .sticky { display: flex; justify-content: center; flex-shrink: 1; min-height: 70px; padding: 0 287px 0; box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.22); background-color: $light--black; // align-items: center; // align-items: stretch; .menu-container { display: inline-flex; flex-direction: column; align-items: center; &:hover { .text-sticky { color: white; } .icon-coffee--grey { display: none; } .icon-coffee--white { display: block; } .icon-capsules--grey { display: none; } .icon-capsules--white { display: block; } .icon-mousse--grey { display: none; } .icon-mousse--white { display: block; } .icon-machines--grey { display: none; } .icon-machines--white { display: block; } } @include between(1, 3) { position: relative; &::after { content: ""; position: absolute; width: 0.5px; right: -3px; min-height: 41px; background-color: $white; top: 50%; transform: translate(-50%, -50%); } } .icon-coffee { width: 44px; height: 18px; // margin: 7px 76px 5px 77px; margin: 18px 77px 5px; } .icon-coffee--white { display: none; } .icon-capsules { width: 49px; height: 14px; // margin: 8px 72px 8px 75px; margin: 19px 74px 8px; } .icon-capsules--white { display: none; } .icon-mousse { width: 25px; height: 24px; margin: 13px 86px 4px; } .icon-mousse--white { display: none; } .icon-machines { width: 15px; height: 26px; margin: 11px 91px 4px; } .icon-machines--white { display: none; } .text-sticky { font-size: 12px; min-height: 16px; font-family: "NespressoLucas-SemiBd"; margin: 0 0 9px 0; line-height: 1.33; letter-spacing: 0.34px; text-transform: uppercase; color: grey; text-align: center; } .rectangle { width: 100%; height: 4px; background-color: $brown; } .hidden { display: none; } } } .hidden { display: none; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> ... <div class="sticky"> <div class="menu-container"> <a class="coffee-icon" href=""> <img class="icon-coffee icon-coffee--grey" src="assets/icon-coffee-grey.svg" alt=""> <img class="icon-coffee icon-coffee--white" src="assets/icon-coffee-white.svg" alt=""> </a> <p class="text-sticky">les cafés</p> <div class="rectangle hidden">test</div> </div> <div class="menu-container"> <a class="capsules-icon" href=""> <img class="icon-capsules icon-capsules--grey" src="assets/icon-capsules-grey.svg" alt=""> <img class="icon-capsules icon-capsules--white" src="assets/icon-capsules-white.svg" alt=""> </a> <p class="text-sticky">les capsules</p> <div class="rectangle hidden">test</div> </div> <div class="menu-container"> <a class="mousse-icon" href=""> <img class="icon-mousse icon-mousse--grey" src="assets/icon-mousse-grey.svg" alt=""> <img class="icon-mousse icon-mousse--white" src="assets/icon-mousse-white.svg" alt=""> </a> <p class="text-sticky">les technologies</p> <div class="rectangle hidden">test</div> </div> <div class="menu-container"> <a class="machines-icon" href=""> <img class="icon-machines icon-machines--grey" src="assets/icon-machines-grey.svg" alt=""> <img class="icon-machines icon-machines--white" src="assets/icon-machines-white.svg" alt=""> </a> <p class="text-sticky">les machines</p> <div class="rectangle hidden">test</div> </div> </div> <script src="script.js"></script> </body> </html>