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

    }

});

使用上面的代码时，您将使用选项元素的value作为css类。因此，空值选项应该具有非enpty值，并且它们不应该有空格（-可以）。

然后你可以使用像下面这样的css

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

// ...

我没有测试过，但你明白了。如果您有任何疑问，请告诉我。我很乐意澄清：）

从选择中更改Div的背景

3 个答案: