显示基于选择的元素 - jQuery、HTML

Question

只有当第一个选项的某个选项被选中时，我才尝试显示第二个选择元素。

应该是直截了当，但它不起作用。

所以我有几个“一”类的选择元素，每个元素后跟一个选择“二”类。 在文档就绪功能中，我首先隐藏了“二”类的所有选择：$('.two').hide(); 工作正常。
然后我有一个函数（也在文档准备函数中），如果从“一”类的选择中选择某个值，则显示下一个“二”类选择。

$('.one').change(function() {  
    var two= $(this).next('.two');  
    if ($(this).val()==3){  
        if(two.is(':hidden')) {  
            two.fadeIn(50);  
        }else{  
            two.fadeOut(50);  
        }  
    }  
});

谁能告诉我我做错了什么？

Answer 1

您很可能在两个选择之间还有其他元素，因此您需要像这样使用nextAll 方法

var two= $(this).nextAll('.two:first'); 

next(selector) 方法将返回正好是下一个兄弟如果它匹配选择器..

此外，我认为您的 IF 嵌套有误。现在您仅在值为 3 时显示/隐藏（如果 .one 的值为 3，则隐藏和显示都会发生）

例如：http://jsfiddle.net/UXS2X/

改变

if ($(this).val()==3){  
        if(two.is(':hidden')) {  
            two.fadeIn(50);  
        }else{  
            two.fadeOut(50);  
        }  
    }  

到

if ($(this).val()==3){  
        if(two.is(':hidden')) {  
            two.fadeIn(50);  
        }  
    } 
 else{  
        two.fadeOut(50);  
     }

Answer 2

试试这个：

if ($('select.two option:selected').val()==3){
...
}