坏:Javascript更改函数不工作

Question

我有一个使用javascript更改文本翻译的问题。

这里是html代码

document.getElementById('slider-en1').style.visibility = 'hidden';
document.getElementById('slider-id1').style.visibility = 'visible';
function changeFunc() {
var selectBox = document.getElementById("language_select");
var selectedValue = selectBox.options[selectBox.selectedIndex].value;
// alert(selectedValue);
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';
}
}

<select class="nav-item has-sub-menu language-selector" id="language_select" onchange="changeFunc();">
<ul class="sub-menu">
<li class="nav-item sub-menu-item">
<option class="nav-link sub-menu-link text-white" disabled default selected value="">Language</option>
</li>
<li class="nav-item sub-menu-item">
<option class="nav-link sub-menu-link text-dark" id="id" value="id">Indonesia</option>
</li>
<li class="nav-item sub-menu-item">
<option class="nav-link sub-menu-link text-dark" id="en" value="en">English</option>
</li>
</ul>
</select>

<div class="col-9 col-md-10 col-lg-8 mx-auto" 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" id="slider-en1">
<p class="slide-subtitle narrow-centerd-text">
en en en
</p>
</div>

我已经尝试使用jquery，但它仍然不工作。谢谢你的回答

我想展示&使用javascript隐藏内容，但我的代码不工作

Answer 1

UL LI不是select的有效子元素。

然而，我简化了你的代码，使其更有效。

我为每个语言div添加了一个data属性。该属性保存了表示内容的语言值。我还创建了一个css类，名为"active&;它将显示相应的语言div，我默认语言div为隐藏。

然后，而不是内联事件(onchange)，我使用一个事件处理程序，这是一个更好的方法，并将帮助你在未来做更多。

在我的事件侦听器中，我只是抓取选中的值。然后我看看是否有任何语言div有活动类，如果有，删除它。然后找到活动类并将其添加到相应的语言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>

Answer 2

对于"id"one_answers";en"条件。需要在if (selectedValue == 'id')条件中交换隐藏/可见值。

可以简化这段代码，但是如果你想继续使用这个方法，那么你可以交换这些值。

document.getElementById('slider-en1').style.visibility = 'hidden';
document.getElementById('slider-id1').style.visibility = 'visible';
function changeFunc() {
var selectBox = document.getElementById("language_select");
var selectedValue = selectBox.options[selectBox.selectedIndex].value;
// alert(selectedValue);
if (selectedValue == 'id') {
document.getElementById('slider-en1').style.visibility = 'hidden';
document.getElementById('slider-id1').style.visibility = 'visible';
}
if (selectedValue == 'en') {
document.getElementById('slider-en1').style.visibility = 'visible';
document.getElementById('slider-id1').style.visibility = 'hidden';
}
}

<select class="nav-item has-sub-menu language-selector" id="language_select" onchange="changeFunc();">
<ul class="sub-menu">
<li class="nav-item sub-menu-item">
<option class="nav-link sub-menu-link text-white" disabled default selected value="">Language</option>
</li>
<li class="nav-item sub-menu-item">
<option class="nav-link sub-menu-link text-dark" id="id" value="id">Indonesia</option>
</li>
<li class="nav-item sub-menu-item">
<option class="nav-link sub-menu-link text-dark" id="en" value="en">English</option>
</li>
</ul>
</select>

<div class="col-9 col-md-10 col-lg-8 mx-auto" 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" id="slider-en1">
<p class="slide-subtitle narrow-centerd-text">
en en en
</p>
</div>

Answer 3

两个if语句都给出了相同的条件:

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';
}
}

也许你必须改变它们，它可能会起作用…很高兴帮助你……