从select更改Div的背景

Question

我做了以下工作，很好。它从下拉列表中更改Div onSelectChange的背景。我相信有更好的方法。有人能推荐一下吗？

感谢您的关注。

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

Answer 1

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

Answer 2

我对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());
}

Answer 3

我建议使用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);

    }

});

在使用上面的代码时，您必须使用option元素的value作为css类。因此，空值选项应该有一个非enpty值，并且不应该有空格(-也可以)。

然后，您可以使用一些css，如下所示

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

// ...

我还没有测试过它，但是你已经明白了。如果你有任何疑问，请告诉我。我很乐意澄清:)