gpt4 book ai didi

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

转载 作者:搜寻专家 更新时间:2023-10-31 22:43:02 24 4
gpt4 key购买 nike

更新 期权值(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 个元素来检查是否打开和关闭,然后打开您想要查看的实际元素。

最佳答案

更新:

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

关于javascript - 使用更少的代码来隐藏和显示选择菜单内容的更好方法是什么? javascript,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29339051/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com