Question

我在这上花了几个小时，找不到有效的解决方案，所以我转向你:)正如你从这个小提琴（http://jsfiddle.net/PPcgE/）看到的那样，我能够瞄准收音机使用此代码单击按钮：

$("input[type='radio']").click(function (e) {
    if ($('.cos-cond').is(":visible")) {
        e.preventDefault();
    } else {
        var clicked = $(this).attr('title');
        var cls = [$('.one'), $('.two'), $('.three'), $('.four'), $('.five'), $('.six'), $('.seven'), $('.eight'), $('.nine'), $('.ten')];
        for (i = 0; i < cls.length; i++) {
            if (cls[i].attr('title') === clicked) {
                cls[i].fadeIn('fast', function(){
                    setTimeout(function(){
                        $('.cos-cond').fadeOut('slow');}, 5000);
                });
            } 
        }
    }
});

我正在尝试做同样的事情（这次显示span.eleven，span.twelve或span.thirteen），具体取决于点击/选择option select框。我能够管理的最好的就是让所有三个人同时出现。

Answer 1

您的原始代码已损坏，i've create a fiddle that fixes it.

你的问题是当你淡出时，你的选择器正在选择所有这些，可见或不可见，然后在淡出时显示所有这些......因此总是显示最后一个（最顶层）。

if (cls[i].attr('title') === clicked) {
    cls[i].fadeIn('fast', function(){
        setTimeout(function(){
            $('.cos-cond:visible').fadeOut('slow');}, 5000);
    });
}

除此之外，您需要尝试尝试如何让下拉框工作。您只提供了旧代码，仅此而已。

Answer 2

尝试

$(".emf-hide").change(function(e){
        var val = $(".emf-hide option:selected").val();
        $('.work-cond').hide();
        switch(val){
        case 'Like New - No Functional Problems':
              $('.eleven').show();    
         break;       
         case 'Minor Functional Problems':
              $('.twelve').show();    
         break;       
         case 'Non-functional':
              $('.thirteen').show();    
         break;       
        }
    });

工作示例here

Answer 3

您的代码不应超过此

$(document).ready(function(){
    $("input[type='radio']").click(function (e) {
        $('.cos-cond, .work-cond').hide();
        var clicked = $(this).attr('title');
        $('span.cos-cond[title=' + clicked + ']').fadeIn(300);
    });
    $("select").change(function (e) {
        $('.cos-cond, .work-cond').hide();
        var value = $(this).val();
        var title = $('option[value="' + value + '"]', this).attr('title');
        $('span.work-cond.' + title).fadeIn(300);
});
});

http://jsfiddle.net/PPcgE/5/

根据选择框中单击的选项显示内容

3 个答案: