Дублирование функции jQuery.Как я могу сделать это короче? - PullRequest
Новая
       40

Дублирование функции jQuery.Как я могу сделать это короче?

0 голосов
/ 15 января 2012

Вы можете проверить страницу здесь: http://jsfiddle.net/7JhjN/

По сути, происходит адское дублирование, и мне это не нравится. Я уверен, что что-то не так, поскольку это неправильная логика программирования.

Как мне сократить эту функцию?

Система работает так: 1. Есть 6x блоков выбора. (значения параметров одинаковы) 2. Есть 6x делений для вывода. 3. Всякий раз, когда изменяется значение поля выбора, изображение в целевом div изменяется.

Ответы [ 3 ]

2 голосов
/ 15 января 2012

Вы можете упростить свой код с помощью запуска с селектором атрибутов.

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

});

Рабочая Демо

2 голосов
/ 15 января 2012

как насчет этого:

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);
});
2 голосов
/ 15 января 2012

Ваша проблема, у вас есть что-то похожее на это: 

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