根據選擇框中單擊的選項顯示內容

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.eleven ， span.twelve或span.thirteen ），這取決於在select框中單擊/選擇了哪個option 。 我能夠管理的最好的方法是讓這三個函數同時出現。

Answer 1

您的原始代碼已損壞， 我創建了一個小提琴來修復它。

您的問題是，當您正在淡出時，選擇器會選擇所有可見（或不可見）的對象，然后在淡出時顯示所有的對象。因此總是顯示最后一個（最上面的）。

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;       
        }
    });        

這里的工作示例

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/