document.getElementById('slider-en1').style.visibility = 'hidden'; document.getElementById('slider-id1').style.visibility = '可見'; 函數changeFunc() { var selectBox = document.getElementById("language_select"); var selectedValue = selectBox.options[selectBox.selectedIndex].value; // 警報(選定值); if (selectedValue == 'id') { document.getElementById('slider-en1').style.visibility = '可見'; document.getElementById('slider-id1').style.visibility = '隱藏'; } if (selectedValue == 'en') { document.getElementById('slider-en1').style.visibility = '可見'; document.getElementById('slider-id1').style.visibility = '隱藏'; } }</pre> <pre class="brush:html;toolbar:false;"><select class="nav-item has-sub-menu language-selector" id="language_select" onchange="changeFunc();">
P粉0463871332023-09-06 00:19:35
UL LI不是select的有效子元素。
然而,我簡化了您的程式碼以提高效率。
我為每個語言div新增了一個data屬性。此屬性保存表示內容的語言值。我還創建了一個名為"active"的css類,它將顯示適當的語言div,並將語言div預設為隱藏。
然後,我使用事件處理程序而不是內聯事件(onchange),這是更好的方法,也將幫助您在將來做更多事情。
在我的事件監聽器中,我只是取得所選值。然後,我查看是否有任何帶有active類別的語言div,如果有,則刪除它。然後,我找到並將active類別新增到適當的語言div。
這個過程將幫助您擴展程式碼,因為您不需要關心if語句。
let langSelect = document.querySelector("#language_select"); langSelect.addEventListener("change",(e) => { let shown = document.querySelector(".active[data-lang]"); if(shown)shown.classList.remove("active"); document.querySelector(`[data-lang='${langSelect.value}']`).classList.add("active") });
[data-lang]{visibility:hidden} .active[data-lang]{visibility:visible;}
<select class="nav-item has-sub-menu language-selector" id="language_select"> <option disabled selected value="">Language</option> <option value="id">Indonesia</option> <option value="en">English</option> </select> <div class="col-9 col-md-10 col-lg-8 mx-auto active" data-lang="id" id="slider-id1"> <p class="slide-subtitle narrow-centerd-text"> indonesia indonesia indonesia </p> </div> <div class="col-9 col-md-10 col-lg-8 mx-auto" data-lang="en" id="slider-en1"> <p class="slide-subtitle narrow-centerd-text"> en en en </p> </div>