Как сжать повторяющийся блок кода JQuery

0

Я использую сценарий плагина O/S, который создает идентификатор, который выглядит как элементы массива следующим образом:

<select name="serviceTypeID[1]" id="serviceTypeID[1]" ...
<select name="serviceTypeID[2]" id="serviceTypeID[2]" ... 
<select name="serviceTypeID[3]" id="serviceTypeID[3]" ...
<select name="serviceTypeID[4]" id="serviceTypeID[4]" ...
<select name="serviceTypeID[5]" id="serviceTypeID[5]" ...
<select name="serviceTypeID[6]" id="serviceTypeID[6]" ...
<select name="serviceTypeID[7]" id="serviceTypeID[7]" ...
<select name="serviceTypeID[8]" id="serviceTypeID[8]" ...
<select name="serviceTypeID[9]" id="serviceTypeID[9]" ...
<select name="serviceTypeID[10]" id="serviceTypeID[10]" ...

Как я могу сконденсировать следующий сценарий jquery, поэтому мне не нужно жестко кодировать-повторять блок для всех 10 экземпляров элемента select html? Могу ли я настроить скрытый элемент формы с установленным для него значением индекса и использовать что-то вроде этого.(). Val()? Это немного превышает мои навыки кодирования. Благодарю.

    $('#serviceTypeID\\[1\\],#serviceTypeID\\[2\\],#serviceTypeID\\[3\\],#serviceTypeID\\[4\\],#serviceTypeID\\[5\\],#serviceTypeID\\[6\\],#serviceTypeID\\[7\\],#serviceTypeID\\[8\\],#serviceTypeID\\[9\\],#serviceTypeID\\[10\\]').change(function() {

      // 1st identical instance of the block
      var first = parseInt( $('#firstService\\[1\\]').val() );
      var second = parseInt( $('#secondService\\[1\\]').val() );
      var third = parseInt( $('#thirdService\\[1\\]').val() );
      if (isNaN(first)) first = 0;
      if (isNaN(second)) second = 0;
      if (isNaN(third)) third = 0;

      $('#serviceTotal\\[1\\]').val( ( first + second + third + ' Total') );

      // 2nd identical instance of the block
      first = parseInt( $('#firstService\\[2\\]').val() );
      second = parseInt( $('#secondService\\[2\\]').val() );
      third = parseInt( $('#thirdService\\[2\\]').val() );
      if (isNaN(first)) first = 0;
      if (isNaN(second)) second = 0;
      if (isNaN(third)) third = 0;

      $('#serviceTotal\\[2\\]').val( ( first + second + third + ' Total') );

      // 3rd identical instance of the block
      first = parseInt( $('#firstService\\[3\\]').val() );
      second = parseInt( $('#secondService\\[3\\]').val() );
      third = parseInt( $('#thirdService\\[3\\]').val() );
      if (isNaN(first)) first = 0;
      if (isNaN(second)) second = 0;
      if (isNaN(third)) third = 0;

      $('#serviceTotal\\[3\\]').val( ( first + second + third + ' Total') );

    //and so on up to 10 currently

      // 10th identical instance of the block
      first = parseInt( $('#firstService\\[10\\]').val() );
      second = parseInt( $('#secondService\\[10\\]').val() );
      third = parseInt( $('#thirdService\\[10\\]').val() );
      if (isNaN(first)) first = 0;
      if (isNaN(second)) second = 0;
      if (isNaN(third)) third = 0;

      $('#serviceTotal\\[10\\]').val( ( first + second + third + ' Total') );

    });
  • 2
    Помимо рефакторинга, чтобы избавиться от дублирования, вы действительно должны использовать базовый аргумент с parseInt : var x = parseInt(foo, 10); ,
  • 0
    Спасибо за предложение @IngoBürk IngoBürk Это тоже немного выходит за рамки моего нынешнего прогресса в развитии навыков.
Показать ещё 6 комментариев
Теги:

3 ответа

2
Лучший ответ

Сначала вам нужен атрибут класса для этого выбора, для более простого и простого выбора.

<select class="serviceType" name="serviceTypeID[1]" id="serviceTypeID[1]" ...
<select class="serviceType" name="serviceTypeID[2]" id="serviceTypeID[2]" ... 

Затем вы можете использовать для цикла в вызове функции:

$('.serviceType').change(function() {

    for(var i=1; i<=10; i++){
      var first = parseInt( $('#firstService\\['+ i +'\\]').val(), 10 );
      var second = parseInt( $('#secondService\\['+ i +'\\]').val(), 10 );
      var third = parseInt( $('#thirdService\\['+ i +'\\]').val(), 10 );
      if (isNaN(first)) first = 0;
      if (isNaN(second)) second = 0;
      if (isNaN(third)) third = 0;

      $('#serviceTotal\\['+ i +'\\]').val( ( first + second + third + ' Total') );
    }
});
  • 0
    это тоже отличное предложение. Я постараюсь включить оба ответа в свое решение. Спасибо @ogur
  • 0
    Это сработало отлично. Спасибо @ogur! Именно то, что мне было нужно ...
Показать ещё 2 комментария
2

Вы можете использовать следующий фрагмент, чтобы перебирать ваши поля выбора с текущим HTML-кодом. При этом я подозреваю, что знание большей части вашей структуры HTML (родители ваших избранных) позволило бы более простое решение.

// All select boxes.
var selects=jQuery("select[name^='serviceTypeID']").change(function() {
    // Pattern to find the counter.
    var matcher = new RegExp("serviceTypeID\\[(\\d+)\\]");

    // Invoke your code for each select box.
    jQuery.each(selects, function(index, select){
        // Get the name.
        var name=jQuery(select).prop("name");
        // Extract the counter.
        var number = matcher.exec(name)[1];

        // Your block.
        var first = parseInt( $('#firstService\\['+number+'\\]').val(), 10 );
        var second = parseInt( $('#secondService\\['+number+'\\]').val(), 10 );
        var third = parseInt( $('#thirdService\\['+number+'\\]').val(), 10 );
        if (isNaN(first)) first = 0;
        if (isNaN(second)) second = 0;
        if (isNaN(third)) third = 0;

        $('#serviceTotal\\['+number+'\\]').val( ( first + second + third + ' Total') );
    });
});
  • 0
    Хорошо, спасибо @AugustusKling. Я на самом деле реализовывал 2 предыдущих ansers и заставил свой скрипт работать с ними. Но я очень ценю ваше предложение.
  • 0
    более динамичный цикл таким образом. хорошо :) +1
Показать ещё 1 комментарий
1

может быть, петля?

for (var i = 1; i <= 10; i++) {
    $('#serviceTypeID\\[' + i + '\\]').change(function () {

        var first = parseInt($('#firstService\\[' + i + '\\]').val(), 10);
        var second = parseInt($('#secondService\\[' + i + '\\]').val(), 10);
        var third = parseInt($('#thirdService\\[' + i + '\\]').val(), 10);
        if (isNaN(first)) first = 0;
        if (isNaN(second)) second = 0;
        if (isNaN(third)) third = 0;

        $('#serviceTotal\\[' + i + '\\]').val((first + second + third + ' Total'));

    });
}
  • 0
    очень круто @naveen. Спасибо за предложение. Я попробую это сейчас и отправлю обратно. Так что высоко ценю ваше время и помощь.
  • 0
    Это сработало отлично. Спасибо @naven! Именно то, что мне было нужно ...
Показать ещё 4 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню