基于选项的显示内容点击一个选择框

我花了几个小时在这个，并找不到解决方案的工作，所以我转向你:)正如你可以从这个小提琴（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框。我能够管理的最好的办法是让所有三个人同时出现。

来源

2014-01-13 MyCompassSpins

您是否有适用于select的代码？我看着小提琴，它显示的是这里的相同代码。如果您希望得到答案，您需要发布选择的工作代码。 –

也，小提琴中的代码也不起作用。无论我选择哪种化妆品条件编号，它都会在下面显示相同的信息。 – erikrunia

这会修复您的原始代码，因此单选按钮消息可以正常工作：http://jsfiddle.net/PPcgE/4/ – erikrunia

您的代码不应该比这个

$(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/

来源

2014-01-13 17:08:20

谢谢！我绝对是过度思考它。一个简单的问题：函数的'e'参数到底是什么？它看起来可能与'.each（）'方法的工作方式相同？ – MyCompassSpins

e是JavaScript事件对象（尝试console.log（e.type，e.screenX）来转储事件属性），但.each方法参数是集合中的对象索引和对象本身。 –

我正在和下面的其他用户进行相同的讨论。代码的作用与事件对象相同或不相同，所以我想我只是好奇为什么会使用它。 – MyCompassSpins

尝试

$(".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

来源

2014-01-13 17:05:43

非常感谢！我试图通过点击目标他们没有工作。我不知道'.change（）'方法。一个简单的问题：将'e'参数添加到函数中是否确保事件每次都改变而不是堆积起来？ – MyCompassSpins

e参数捕获事件。但我不明白'确保事件每次都改变而不是堆积起来' –

我在早期的尝试中遇到的一个问题是点击会显示正确的内容，但不会在新的点击中消失， “跨度”只是堆叠在一起。你的代码在使用或不使用'e'参数时似乎都是一样的，所以我只是好奇它为什么在那里。 – MyCompassSpins

你原来的代码被打破较长，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); 
    }); 
}

除此之外，你需要提供你尝试让你的下拉框工作的尝试。你只提供旧的代码，没有更多。

来源

2014-01-13 17:16:47 erikrunia

@erikunia：我很欣赏反馈。问题在于你。这段代码（虽然不是理想的）对我和我提供的小提琴中的其他人来说工作得很好。 – MyCompassSpins

基于选项的显示内容点击一个选择框

回答

相关问题