從選擇變更Div的背景

我做了以下工作，很好。它從下拉菜單中更改Div onSelectChange的背景。我確信有更好的方式。有人可以推薦嗎？從選擇變更Div的背景

謝謝你看。

$(document).ready(function() { 

    $("#QuoteRequiredFor").change(onSelectChange); 

}); 

function onSelectChange() { 
    var selected = $("#QuoteRequiredFor option:selected"); 
    var output = ""; 
    if (selected.val() == '') { 
     output = "You Selected " + selected.text(); 
     $('#FinanceQuoteForm').css('background', 'url(/Finance-Quote/FinanceQuoteForm/images/FFheaderQuoteFactoring.jpg)'); 
    }; 
    if (selected.val() == 'Factoring') { 
     output = "You Selected " + selected.text(); 
     $('#FinanceQuoteForm').css('background', 'url(/Finance-Quote/FinanceQuoteForm/Images/factoring.jpg)'); 
    }; 
    if (selected.val() == 'Mortgage') { 
     output = "You Selected " + selected.text(); 
     $('#FinanceQuoteForm').css('background', 'url(/Finance-Quote/FinanceQuoteForm/Images/Mortgage.jpg)'); 
    }; 
    if (selected.val() == 'Stock') { 
     output = "You Selected " + selected.text(); 
     $('#FinanceQuoteForm').css('background', 'url(/Finance-Quote/FinanceQuoteForm/Images/stock.jpg)'); 
    }; 
    if (selected.val() == 'Asset') { 
     output = "You Selected " + selected.text(); 
     $('#FinanceQuoteForm').css('background', 'url(/Finance-Quote/FinanceQuoteForm/Images/asset.jpg)'); 
    }; 
    if (selected.val() == 'Invoice discounting') { 
     output = "You Selected " + selected.text(); 
     $('#FinanceQuoteForm').css('background', 'url(/Finance-Quote/FinanceQuoteForm/Images/factoring.jpg)'); 
    }; 

    $("#output").html(output); 
}

來源

2011-04-23 Bocker

$(document).ready(function() { 

    $("#QuoteRequiredFor").change(onSelectChange); 

}); 

function onSelectChange() { 
    var selected = $("#QuoteRequiredFor option:selected"); 
    var output = ""; 
    var cssValues = new Array(); 
    cssValues['Factoring'] = 'factoring.jpg'; 
    cssValues['Mortgage'] = 'Mortgage.jpg'; // same as for other values 

    if(selected.val() == ''){ 
    output = "You Selected " + selected.text();  
    $('#FinanceQuoteForm').css('background', 'url(/Finance-Quote/FinanceQuoteForm/images/FFheaderQuoteFactoring.jpg)'); 
    } 
    else{ 
    output = "You Selected " + selected.text(); 
    $('#FinanceQuoteForm').css('background', 'url(/Finance-Quote/FinanceQuoteForm/Images/'+cssValues[selected.val()]+')'); 
    } 

    $("#output").html(output); 
}

來源

2011-04-23 13:38:56 Gaurav

恩，由於縮進不一致造成的小監督，你在'else' cluase中丟失了設置輸出 – 2011-04-23 13:57:03

@Shrikant：謝謝，指點我。 – Gaurav 2011-04-23 13:59:03

非常感謝您抽出時間。使我的嘗試看起來笨重。 – Bocker 2011-04-23 14:16:33

我不知道jQuery的多，沒有用它。但我知道的是，你是太多重複的代碼，我希望這有助於

$(document).ready(function(){ 

$("#QuoteRequiredFor").change(onSelectChange); 
}); 

function onSelectChange(){ 
    var selected = $("#QuoteRequiredFor option:selected");  
    var url; 
     if(selected.val() == '') { url = '/Finance-Quote/FinanceQuoteForm/images/FFheaderQuoteFactoring.jpg';} 
     else if (selected.val() == 'Factoring'){ url = '/Finance-Quote/FinanceQuoteForm/Images/factoring.jpg'; } 
     else if (selected.val() == 'Mortgage'){ url = '/Finance-Quote/FinanceQuoteForm/Images/Mortgage.jpg');} 
     else if (selected.val() == 'Stock'){ url = '/Finance-Quote/FinanceQuoteForm/Images/stock.jpg'); } 
     else if (selected.val() == 'Asset'){ url = '/Finance-Quote/FinanceQuoteForm/Images/asset.jpg'); } 
     else if (selected.val() == 'Invoice discounting'){ url = '/Finance-Quote/FinanceQuoteForm/Images/factoring.jpg'); } 

    $('#FinanceQuoteForm').css('background', 'url('+url+')'); 
    $("#output") .html("You Selected " + selected.text()); 
}

來源

2011-04-23 13:42:54

我建議你調用css方法的使用CSS樣式來代替。您的JavaScript看起來非常非常理智的，

$(function() { 
    $("#QuoteRequiredFor").change(onSelectChange); 

    var lastClass = ''; 
    function onSelectChange() { 

     var selectedVal = $(this).val(), output = 'You selected ' + selectedVal; 

     $(this).removeClass(lastClass).addClass(selectedVal); 
     lastClass = selectedVal; 

     $("#output").html(output); 

    } 

});

當使用上面的代碼，你將不得不使用使用value S中選擇元素是CSS類。所以，空值選項應該有一個非空值，並且它們不應該有空格（-沒問題）。

然後你可以使用一些CSS像下面

.factoring { 
    background: url("/Finance-Quote/FinanceQuoteForm/images/FFheaderQuoteFactoring.jpg"); 
} 

// ...

我沒有測試它，但你的想法。如果您有任何疑問，請告訴我。我很樂意澄清:)

來源

2011-04-23 13:54:02

非常感謝您花時間。使我的嘗試看起來笨重。 – Bocker 2011-04-23 14:17:04

@Bocker：沒問題。編寫這樣的代碼是你如何學習:) – 2011-04-23 15:40:12

從選擇變更Div的背景

回答

相關問題