jQuery 함수 중복. 어떻게하면 더 짧게 만들 수 있습니까?

Question

여기에서 페이지를 확인할 수 있습니다. http://jsfiddle.net/7JhjN/

기본적으로 반복되는 지겹기가 있으며 나는 이것을 좋아하지 않습니다. 올바른 프로그래밍 논리가 아니기 때문에 잘못된 것이 있다고 확신합니다.

어떻게이 기능을 단축 할 수 있습니까?

시스템은 다음과 같이 작동합니다. 1. 6x 선택 상자가 있습니다. (옵션 값은 동일합니다.) 2. 출력을 위해 6x div가 있습니다. 3. 선택 상자 값이 변경 될 때마다 대상 div의 이미지가 변경됩니다.

Answer 1

Demo 어떻게 이것에 대해 :

HTML :

<select class='item_early' name="item_early1" data-id="1"><option value="0"></option></select> 
<select class='item_early' name="item_early2" data-id="2"> <option value="0"></option></select> 
<select class='item_early' name="item_early3" data-id="3"> <option value="0"></option></select> 
<select class='item_early' name="item_early4" data-id="4"> <option value="0"></option></select> 

<div id="result_item_early1"></div> 
<div id="result_item_early2"></div> 
<div id="result_item_early3"></div> 
<div id="result_item_early4"></div> 

자바 스크립트 :

$('.item_early').change(function() { 
    var value = $(this).val(); 
    var id = $(this).data('id'); 

    $('#result_item_early'+id).html('<img src="http://www.sobafire.com/themes/default/images/loading.gif">'); 
    $('#result_item_early'+id).load('http://www.sobafire.com/ajax.php?ajaxType=ITEM&itemID=' + value); 
}); 

Answer 2

귀하의 문제, 당신은 다음과 같습니다 뭔가가 있습니다

$('#item_early1').change(function() { 
    var value = $(this).val(); 
    //directly set loading value as html 
    $('#result_item_early1').html('<img src="http://www.sobafire.com/themes/default/images/loading.gif">'); 

    //change image url source from server (expected return value is something like <img src="" /> 
    $('#result_item_early1').load('http://www.sobafire.com/ajax.php?ajaxType=ITEM&itemID=' + value); 

}); 

을 그리고 당신은 다른 상수 반복합니다.

function doit(itemID,resultID) { 
    $(itemID).change(function() { 
     var value = $(this).val(); 
     //directly set loading value as html 
     $(resultID).html('<img src="http://www.sobafire.com/themes/default/images/loading.gif">'); 

     //change image url source from server (expected return value is something like <img src="" /> 
     $(resultID).load('http://www.sobafire.com/ajax.php?ajaxType=ITEM&itemID=' + value); 
    }); 
} 

그런 다음 모든 상수 그 함수를 호출 : 당신은 당신의 코드를 단순화 할 수

doit('#item_early1','#result_item_early1'); 
doit('#item_early2','#result_item_early2'); 
doit('#item_early3','#result_item_early3'); 
doit('#item_early4','#result_item_early4'); 
doit('#item_early5','#result_item_early5'); 
doit('#item_early6','#result_item_early6'); 

Answer 3

대답은 다음 함수에 넣어이 같은 변수 이름으로 상수를 교체입니다 속성 선택자로 시작을 사용하여. 근무

$('select[name^="item_early"]').change(function() { 
    var $this = $(this); 
    var value = $this.val(); 
    var $resultDiv = $('#result_' + $this.attr('name')); 
    //directly set loading value as html 
    $resultDiv.html('<img src="http://www.sobafire.com/themes/default/images/loading.gif">'); 

    //change image url source from server (expected return value is something like <img src="" /> 
    $resultDiv.load('http://www.sobafire.com/ajax.php?ajaxType=ITEM&itemID=' + value); 

});