所以我尝试制作一个时间轴，如果您从下拉选择框中选择一个项目，它将仅显示该选择(时代)的信息。我找到了这个 Code这让我可以做到这一点，但是一旦我添加了一些我自己的东西，它就停止工作了。我想知道为什么会这样，以及可以做些什么来解决它。 完整代码:
<script type="text/javascript">
$(document).ready(function(){
$("select").change(function(){
$(this).find("option:selected").each(function(){
if($(this).attr("value")=="red"){
$(".box").not(".red").hide();
$(".red").show();
}
else if($(this).attr("value")=="green"){
$(".box").not(".green").hide();
$(".green").show();
}
else if($(this).attr("value")=="blue"){
$(".box").not(".blue").hide();
$(".blue").show();
else if($(this).attr("value")=="maroon"){
$(".box").not(".maroon").hide();
$(".maroon").show();
else if($(this).attr("value")=="magenta"){
$(".box").not(".magenta").hide();
$(".magenta").show();
}
else{
$(".box").hide();
}
});
}).change();
});
</script>
</head>
<body>
<div>
<select>
<option>Choose Color</option>
<option value="red">Red</option>
<option value="green">Green</option>
<option value="blue">Blue</option>
<option value="maroon">maroon</option>
<option value="magenta">magenta</option>
</select>
</div>
<div class="red box">
</div>
<div class="green box">hello</div>
<div class="blue box">talofa</div>
<div class="maroon box"> <h2>BURGANDY!</h2></div>
<div class="magenta box"> <h2>PINK!</h2></div>
编辑: 我对 JS 和 JQuery 非常陌生(就像，以前从未使用过它们中的任何一个)，因此不胜感激!
最佳答案
您有几个语法错误。您没有使用 } 关闭 else if。您可能需要检查 console。
另外，不确定你为什么要这样做 $(this).find("option:selected").each(function(){... 因为只能选择一个选项任何给定时间。
这是工作代码。
$(document).ready(function() {
$("select").change(function() {
var color = $(this).val();
if (color == "red") {
$(".box").not(".red").hide();
$(".red").show();
} else if (color == "green") {
$(".box").not(".green").hide();
$(".green").show();
} else if (color == "blue") {
$(".box").not(".blue").hide();
$(".blue").show();
} else if (color == "maroon") {
$(".box").not(".maroon").hide();
$(".maroon").show();
} else if (color == "magenta") {
$(".box").not(".magenta").hide();
$(".magenta").show();
} else {
$(".box").hide();
}
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<select>
<option>Choose Color</option>
<option value="red">Red</option>
<option value="green">Green</option>
<option value="blue">Blue</option>
<option value="maroon">maroon</option>
<option value="magenta">magenta</option>
</select>
</div>
<div class="red box">
</div>
<div class="green box">hello</div>
<div class="blue box">talofa</div>
<div class="maroon box">
<h2>BURGANDY!</h2>
</div>
<div class="magenta box">
<h2>PINK!</h2>
</div>关于javascript - 根据下拉选择显示/隐藏 div - jquery，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37536559/