jQuery函数重复。我怎样才能缩短这个时间？

Question

您可以在这里查看页面：http://jsfiddle.net/7JhjN/

基本上，有一个地狱重复正在进行，我不喜欢这个。我确信有错误，因为它不是一个正确的编程逻辑。

如何缩短此功能？

该系统的工作原理如下： 1.有6个选择框。 （选项值相同） 2.有6个div用于输出。 3.每当选择框值发生变化时，目标div中的图像都会发生变化。

Answer 1

这个怎么样：

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> 

的Javascript：

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

}); 

工作Demo