2

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

作为说明，我出于我的目的编辑了此链接的代码。我对 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>
4

6 回答 6

4

您正在使用类选择器按 ID 选择元素，您应该使用jQuery 选择器而不是 CSS 选择器#。.您还可以缩小代码。

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

http://jsfiddle.net/X7AbR/

于 2012-09-14T21:11:28.923 回答
1

您的选择器正在使用：

$('.optionX')

什么时候应该：

$('#optionX')

这是因为 'optionX' 是一个 ID 而不是一个类。如果它是一个类，'.optionX' 会起作用。

于 2012-09-14T21:10:09.250 回答
0

哇...有人没有听说过 DRY（“不要重复自己”）。一个简单的循环将杀死所有这些代码：

$("#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。

于 2012-09-14T21:12:11.107 回答
0

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

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

选择.器按类名选择元素，而您没有具有“选择”类的元素，您在这里想要的是$("#choices")按 id 选择的元素。

这同样适用于您的选项选择，您可以在其中按类选择，.而您的元素具有应选择的 id#

资源：

jQuery id 选择器

jQuery 类选择器

jQuery 选择器

于 2012-09-14T21:14:31.170 回答
0

你的选择器是错误的。您在 html 中使用 id，但在 jquery 中使用类。修复它改变

$(".choices")到$("#choices")

$(".optionX")到$("#optionX")

小提琴示例：http: //jsfiddle.net/johnkoer/UDKrA/10/

于 2012-09-14T21:15:02.893 回答
0

动态构建您的选择器并使用以下.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/

于 2012-09-14T21:16:56.047 回答