문제: Javascript의 변경 기능이 유효하지 않습니다.
P粉654894952
2023-09-06 00:04:57
<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';
함수changeFunc() {
var selectBox = document.getElementById("언어_선택");
var selectedValue = selectBox.options[selectBox.selectedIndex].value;
// 경고(선택된 값);
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';
}
}</pre>
<pre class="brush:html;toolbar:false;"><select class="nav-item has-sub-menu 언어 선택기" id="언어_select" onchange="changeFunc();">
<ul class="하위 메뉴">
<li class="nav-item 하위 메뉴 항목">
<option class="nav-link sub-menu-link text-white" 비활성화된 기본 선택 값="">언어</option>
</li>
<li class="nav-item 하위 메뉴 항목">
<option class="nav-link sub-menu-link text-dark" id="id" value="id">인도네시아</option>
</li>
<li class="nav-item 하위 메뉴 항목">
<option class="nav-link sub-menu-link text-dark" id="en" value="en">영어</option>
</li>
</ul>
</선택>
<div class="col-9 col-md-10 col-lg-8 mx-auto" id="slider-id1">
<p class="slide-subtitlearrow-centerd-text">
인도네시아 인도네시아 인도네시아
</p>
</div>
<div class="col-9 col-md-10 col-lg-8 mx-auto" id="slider-en1">
<p class="slide-subtitlearrow-centerd-text">
엉 엉 엉
</p>
</p>
<p>저는 jquery를 사용하여 jquery를 수정했습니다.
<p>我尝试使는 JavaScript를 사용하여 显示 and 隐藏内容，但我的代码无法正常工作</p>
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
UL LI는 select의 유효한 하위 요소가 아닙니다.
하지만 효율성을 위해 코드를 단순화했습니다.
각 언어 div에 데이터 속성을 추가했습니다. 이 속성은 콘텐츠를 나타내는 언어 값을 보유합니다. 또한 적절한 언어 div를 표시하고 기본적으로 언어 div를 숨기는 "active"라는 CSS 클래스를 만들었습니다.
그런 다음 인라인 이벤트(onchange) 대신 이벤트 핸들러를 사용했습니다. 이는 더 나은 방법이며 앞으로 더 많은 작업을 수행하는 데 도움이 될 것입니다.
내 이벤트 리스너에서는 선택한 값만 가져옵니다. 그런 다음 활성 클래스가 있는 언어 div가 있는지 확인하고 있으면 삭제합니다. 그런 다음 활성 클래스를 찾아서 적절한 언어 div에 추가합니다.
이 프로세스는 if 문에 신경 쓸 필요가 없기 때문에 코드를 확장하는 데 도움이 됩니다.