Div의 배경을 선택에서 변경하십시오.

다음과 같이 작성했습니다. 정상적으로 작동합니다. Div onSelectChange의 배경을 드롭 다운에서 변경합니다. 나는 더 좋은 방법이있을 것이라고 확신한다. 아무도 추천 할 수 있겠습니까?Div의 배경을 선택에서 변경하십시오.

감사합니다.

나는 JQuery와 많이 모르는

$(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의 출력 설정을 놓치고 있습니다. –

@Shrikant : 감사합니다. – Gaurav

시간을 내 주셔서 대단히 감사합니다. 내 시도가 어색해 보이게 만듭니다. – Bocker

는, 그것을 사용하지 않았습니다. 하지만 내가 아는 것은 당신이 너무 많은 코드를 반복하는 것입니다, 나는이

$(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 스타일을 사용하는 것이 좋습니다 것입니다 도움이되기를 바랍니다. 자바 스크립트는 위의 코드를 사용하는 경우

$(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 클래스가 될 수있을 것이다, 훨씬 더 온건 볼 것이다. 따라서 빈 값 옵션에는 비어 있지 않은 값이 있어야하며 공백이 없어야합니다 ( -은 괜찮습니다).

그럼 당신은 내가 그것을 테스트하지 않은 다음

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

// ...

같은 일부 CSS를 사용할 수 있지만 당신은 아이디어를 얻을. 의심스러운 점이 있으면 알려주세요. 나는 명확히 해 드리겠습니다 :)

출처

2011-04-23 13:54:02

시간을 내 주셔서 대단히 감사합니다. 내 시도가 어색해 보이게 만듭니다. – Bocker

@Bocker : 문제 없습니다. 그런 코드를 작성하는 방법을 배우는 것입니다 :) –

Div의 배경을 선택에서 변경하십시오.

답변

관련 문제