搜尋

首頁  >  問答  >  主體

問題:Javascript的更改函數無效

<p>我在使用 JavaScript 更改文字翻譯時遇到問題。</p> <p>這是html代碼</p> <p>
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();">
  
    <li class="nav-item 子選單項目"> <選項類別=「導覽連結子選單連結文字白色」停用預設選取值=「」>語言 </li> <li class="nav-item 子選單項目"> </li> <li class="nav-item 子選單項目"> ; </li> </ul> </選擇> <div class="col-9 col-md-10 col-lg-8 mx-auto" id="slider-id1"> <p class="slide-subtitle slim-centerd-text"> 印尼 印尼 印尼 </p>
<div class="col-9 col-md-10 col-lg-8 mx-auto" id="slider-en1"> <p class="slide-subtitle slim-centerd-text"> 恩恩恩 </p> </div></pre> </p> <p>我嘗試使用jquery,但仍然無法正常工作。謝謝您的回答</p> <p>我嘗試隱藏使用 JavaScript 顯示和內容,但我的程式碼無法正常運作</p>
P粉654894952P粉654894952447 天前611

全部回覆(1)我來回復

  • P粉046387133

    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>

    回覆
    0
  • 取消回覆