Question

我的代码如下所示。每个div标签都由CSS设置为display: none;，没有别的。我希望选择框仅显示所选div及其内容，但隐藏其余部分。我觉得我只是错过了一些简单的东西，但我无法理解。我正在使用jQuery 1.8.1。提前谢谢！

作为备注，我为了我的目的编辑了this link's代码。我对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>

Answer 1

您正在使用类选择器按ID选择元素，您应该使用#而不是.，jQuery选择器的工作方式与CSS选择器类似。您也可以缩小代码。

$("#choices").change(function(){ 
   $('.hide').slideUp();
   $('#'+this.value).slideDown()
});

http://jsfiddle.net/X7AbR/

Answer 2

您使用错误的css选择器来获取元素。

$(".choices").change(function(){

.选择器按类名选择元素，并且您没有带有“选项”类的元素，您在此处想要的是$("#choices")，它按ID选择。

这同样适用于您的选项选择，您可以选择带有.的班级，同时您拥有应使用#选择的ID的元素

资源：

jQuery id-selector

jQuery class-selectors

jQuery selectors

Answer 3

动态构建您的选择器并使用.siblings()方法：

$("#choices").change(function(){ // that's an ID, not a class
    var val = $(this).val();
    $('#'+val).slideDown('fast').siblings('.hide').slideUp('fast');
});

http://jsfiddle.net/mblase75/QkNX4/

使用jQuery显示/隐藏<div> </div>

3 个答案: