你可以在这里查看页面:http: //jsfiddle.net/7JhjN/
基本上,有大量的重复发生,我不喜欢这样。我确信有问题,因为它不是正确的编程逻辑。
如何缩短此功能?
该系统的工作原理如下: 1. 有 6 个选择框。(选项值相同) 2. 有 6x div 用于输出。3. Whenever a select box value gets changed, image in target div gets changed.
你可以在这里查看页面:http: //jsfiddle.net/7JhjN/
基本上,有大量的重复发生,我不喜欢这样。我确信有问题,因为它不是正确的编程逻辑。
如何缩短此功能?
该系统的工作原理如下: 1. 有 6 个选择框。(选项值相同) 2. 有 6x div 用于输出。3. Whenever a select box value gets changed, image in target div gets changed.
你的问题,你有这样的东西:
$('#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');
您可以通过使用属性选择器开始来简化代码。
$('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);
});
工作演示
这个怎么样:
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);
});