所以我尝试制作一个时间轴,如果你从下拉选择框中选择一个项目,它将只显示该选择(时代)的信息。我发现这个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的新手(喜欢,之前从未使用过它们),所以我们非常感谢您的解释!
答案 0 :(得分:3)
您有几个syntax
错误。您没有使用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>
答案 1 :(得分:1)
你在其他地方附近错过了一些右括号。 找一个好的javascript IDE,比如sublime,同时确保你阅读控制台消息。
$(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 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">Redish!</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>
答案 2 :(得分:0)
其他答案解释了错别字。
这是一个更简单的版本
修复了代码并添加了初始隐藏所有css
$(function() {
$("select").on("change", function() {
const val = this.value
$(".box").not("." + val).hide();
$("." + val).show();
}).change();
});
.box {
display: none;
}
.red {
background-color: red;
}
.green {
background-color: green;
}
.blue {
background-color: blue;
}
.maroon {
background-color: maroon;
}
.magenta {
background-color: magenta;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.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">Red</div>
<div class="green box">Green</div>
<div class="blue box">Blue</div>
<div class="maroon box">
<h2>Maroon!</h2>
</div>
<div class="magenta box">
<h2>Magenta!</h2>
</div>
答案 3 :(得分:-1)
试试这个:
$(document).ready(function(){
// Use className or Id instead of direct tag name
$('.choose-color').on('change', function() {
var val = $(this).val();
var box = $('.box');
box.hide(); // hide all boxes
$('.' + val).show(); // show the current one
})
});