使用jQuery显示/隐藏<div>
使用jQuery显示/隐藏<div>
提问于 2012-09-14 21:08:29
我有下面的密码。CSS将每个div标记设置为display: none;，而不是其他任何标记。我希望复选框只显示选定的div及其内容，但隐藏其余的内容。我觉得我只是错过了一些简单的东西，但我搞不懂。我使用的是jQuery 1.8.1。提前感谢！
请注意，我为自己的目的编辑了http://anthonygthomas.com/2010/03/14/display-form-fields-based-on-selection-using-jquery/代码。我对javascript并不出色，这就是为什么这可能很糟糕的原因。
<script type="text/javascript">
$(document).ready(function(){
$("#choices").change(function(){
if ($(this).val() == "option1" ) {
$("#option1").slideDown("fast");
$("#option2").slideUp("fast");
$("#option3").slideUp("fast");
$("#option4").slideUp("fast");
$("#option5").slideUp("fast");
$("#option6").slideUp("fast");
$("#option7").slideUp("fast");
}
if ($(this).val() == "option2" ) {
$("#option1").slideUp("fast");
$("#option2").slideDown("fast");
$("#option3").slideUp("fast");
$("#option4").slideUp("fast");
$("#option5").slideUp("fast");
$("#option6").slideUp("fast");
$("#option7").slideUp("fast");
}
if ($(this).val() == "option3" ) {
$("#option1").slideUp("fast");
$("#option2").slideUp("fast");
$("#option3").slideDown("fast");
$("#option4").slideUp("fast");
$("#option5").slideUp("fast");
$("#option6").slideUp("fast");
$("#option7").slideUp("fast");
}
if ($(this).val() == "option4" ) {
$("#option1").slideUp("fast");
$("#option2").slideUp("fast");
$("#option3").slideUp("fast");
$("#option4").slideDown("fast");
$("#option5").slideUp("fast");
$("#option6").slideUp("fast");
$("#option7").slideUp("fast");
}
if ($(this).val() == "option5" ) {
$("#option1").slideUp("fast");
$("#option2").slideUp("fast");
$("#option3").slideUp("fast");
$("#option4").slideUp("fast");
$("#option5").slideDown("fast");
$("#option6").slideUp("fast");
$("#option7").slideUp("fast");
}
if ($(this).val() == "option6" ) {
$("#option1").slideUp("fast");
$("#option2").slideUp("fast");
$("#option3").slideUp("fast");
$("#option4").slideUp("fast");
$("#option5").slideUp("fast");
$("#option6").slideDown("fast");
$("#option7").slideUp("fast");
}
if ($(this).val() == "option7" ) {
$("#option1").slideUp("fast");
$("#option2").slideUp("fast");
$("#option3").slideUp("fast");
$("#option4").slideUp("fast");
$("#option5").slideUp("fast");
$("#option6").slideUp("fast");
$("#option7").slideDown("fast");
}
});
</script>
random body text
<form>
<select id="choices">
<option value="none">Select one...</option>
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
<option value="option3">Option 3</option>
<option value="option4">Option 4</option>
<option value="option5">Option 5</option>
<option value="option6">Option 6</option>
<option value="option7">Option 7</option>
</select>
</form>
<div id="option1" class="hide">Opt 1 Text</div>
<div id="option2" class="hide">Opt 2 Text</div>
<div id="option3" class="hide">Opt 3 Text</div>
<div id="option4" class="hide">Opt 4 Text</div>
<div id="option5" class="hide">Opt 5 Text</div>
<div id="option6" class="hide">Opt 6 Text</div>
<div id="option7" class="hide">Opt 7 Text</div>回答 6
Stack Overflow用户
回答已采纳
发布于 2012-09-14 21:11:28
您使用类选择器按ID选择元素，应该使用#而不是.，jQuery选择器的工作方式类似于CSS选择器。你也可以缩小你的代码。
$("#choices").change(function(){
$('.hide').slideUp();
$('#'+this.value).slideDown()
});http://jsfiddle.net/X7AbR/
Stack Overflow用户
发布于 2012-09-14 21:10:09
您的选择器正在使用：
$('.optionX')当它应该是：
$('#optionX')这是因为'optionX‘是一个ID而不是一个类。如果它是一个类，'.optionX‘就能工作。
Stack Overflow用户
发布于 2012-09-14 21:12:11
哇..。有人没听说过干(“别重复”)。一个简单的循环将杀死所有这些代码：
$("#choices").change(function() {
for( var i=1; i<=7; i++) {
$("#option"+i)["slide"+($(this).val() == "option"+i ? "Down" : "Up")]("fast");
}
});还请注意，我修复了您的问题：.choices是指类名中有choices的任何元素。#choices引用ID为choices的元素。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/12431989
复制相关文章
相似问题
腾讯云开发者
