jQuery功能重复.我怎么能把这个短一点

jQuery function duplication. How can I make this shorter?

本文关键字：一点 功能 怎么能 jQuery      更新时间：2023-09-26

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

基本上，有很多重复，我不喜欢这样。我确信有些地方出了问题，因为它不是一个正确的编程逻辑。

如何缩短此函数？

系统的工作方式如下：1.有6个选择框。（选项值相同）2.输出有6个div。3.每当选择框值发生更改时，目标div中的图像就会发生更改。

这个怎么样：

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

你的问题是，你有这样的东西：

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

您可以通过使用带有属性选择器的starts来简化代码。

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

工作演示

相关文章：