Problème : la fonction de modification de Javascript ne fonctionne pas

Question

我在使用 JavaScript 更改文本翻译时遇到问题。

这是html代码

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>

Answer 1

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>