Problème : la fonction de modification de Javascript ne fonctionne pas
P粉654894952
P粉654894952 2023-09-06 00:04:57
0
1
600
<p>我在使用 JavaScript 更改文本翻译时遇到问题。</p> <p>这是html代码</p> <p> <pre class="brush:js;toolbar:false;">document.getElementById('slider-en1').style.visibility = 'hidden'; document.getElementById('slider-id1').style.visibility = 'visible'; fonction changeFunc() { var selectBox = document.getElementById("langue_select"); var selectedValue = selectBox.options[selectBox.selectedIndex].value; // alerte (valeur sélectionnée); if (selectedValue == 'id') { document.getElementById('slider-en1').style.visibility = 'visible'; document.getElementById('slider-id1').style.visibility = 'hidden'; } if (selectedValue == 'en') { document.getElementById('slider-en1').style.visibility = 'visible'; document.getElementById('slider-id1').style.visibility = 'hidden'; } }</pré> <pre class="brush:html;toolbar:false;"><select class="nav-item has-sub-menu language-selector" id="lingual_select" onchange="changeFunc();"> <ul class="sous-menu"> <li class="nav-item sub-menu-item"> <option class="nav-link sub-menu-link text-white" désactivé valeur sélectionnée par défaut="">Langue</option> ≪/li> <li class="nav-item sub-menu-item"> <option class="nav-link sub-menu-link text-dark" id="id" value="id">Indonésie</option> ≪/li> <li class="nav-item sub-menu-item"> <option class="nav-link sub-menu-link text-dark" id="en" value="en">Anglais</option> ≪/li> </ul> </sélectionner> <div class="col-9 col-md-10 col-lg-8 mx-auto" id="slider-id1"> <p class="slide-subtitle étroit-centerd-text"> indonésie indonésie indonésie </p> </div> <div class="col-9 col-md-10 col-lg-8 mx-auto" id="slider-en1"> <p class="slide-subtitle étroit-centre-texte"> fr fr fr </p> </div></pre> </p> <p> <p>
P粉654894952
P粉654894952

répondre à tous(1)
P粉046387133

UL LI n'est pas un élément enfant valide de select.

Cependant, j'ai simplifié votre code pour plus d'efficacité.

J'ai ajouté un attribut de données à chaque div de langue. Cette propriété contient la valeur de langue représentant le contenu. J'ai également créé une classe CSS appelée "active" qui affichera le div de langue approprié et masquera le div de langue par défaut.

Ensuite, j'ai utilisé le gestionnaire d'événements au lieu de l'événement en ligne (onchange), ce qui est un meilleur moyen et vous aidera également à en faire plus à l'avenir.

Dans mon auditeur d'événement, je reçois simplement la valeur sélectionnée. Je vois ensuite s'il existe des divs de langue avec une classe active, et si c'est le cas, je les supprime. Je trouve et ajoute ensuite la classe active au div de langue approprié.

Ce processus vous aidera à étendre votre code car vous n'avez pas besoin de vous soucier des instructions 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>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal