javascript - 使用更少的代码来隐藏和显示选择菜单内容的更好方法是什么？ javascript

Question

更新 期权值(value)不是递增的，这有关系吗？例如。一个选项可能是苹果，下一个可能是狗

我有多个带有多个选项的下拉菜单，每次我选择一个选项时都会显示不同的信息，但为了隐藏它以显示不同选项的信息，我必须比较当前选项的值，如果匹配，则隐藏它，然后显示新选项的信息。

举个例子:

下拉选择菜单

<select name="name_of_select_menu" onchange="showContent(value);">
<option value="">label option</option>
<option value="apple">apple</option>
<option value="dog">dog</option>
<option value="shoes">shoes</option>
</select>

JavaScript

<script type="text/javascript">
function showContent($i) {
if($i=="apple"){
document.getElementById('apple').style.display = "inline-block";
document.getElementById('dog').style.display = "none";
document.getElementById('shoes').style.display = "none";
}
if($i=="apple"){
document.getElementById('apple').style.display = "none";
document.getElementById('dog').style.display = "inline-block";
document.getElementById('shoes').style.display = "none";
}
if($i=="apple"){
document.getElementById('apple').style.display = "none";
document.getElementById('dog').style.display = "none";
document.getElementById('shoes').style.display = "inline-block";
}

}

要显示的内容

<div class="content">
<div id="apple">
<p>
I am an apple
</p>
</div>
<div id="dog">
<p>
I am a dog
</p>
</div>
<div id="shoes">
<p>
I am a pair of shoes
</p>
</div>
</div>

如您所见，这可以变得很多...我有一个菜单有 20 个选项...19 个元素来检查是否打开和关闭，然后打开您想要查看的实际元素。

Answer 1

更新:

function showContent(i) {
    $(".content>div").hide(); //for arbitrary keywords.
    $('div#' + i).css("display", "inline-block");
}

将函数更改为:

function showContent(i) {
    $("[id*=option]").hide();
    $('#' + i).css("display", "inline-block");
}

Read more about attribute selectors