Перебора массива факторизовать яваскрипт кода

Question

У меня есть яваскрипт код, который мне нужно повторять много раз, только с небольшим изменением:

мне нужно взять функцию ниже, и повторить его ТОЧНО то же самым, кроме изменения info_throbber к video_throbber, затем, map_throbber, затем picture_throbber и делать изменения только на 2 строках: строка 2 и 9)

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

$(function() { 
    var $modal_types = $('select#game_info_throbber_modal_types') # FIRST INJECTION HERE 
    , $li   = $modal_types.parent('li') 
    , $ol   = $li.parent('ol') 
    , $form   = $modal_types.closest('form') 
    , $submit  = $form.find('input[type=submit]') 
    , $add_modal = $('<a href="#">Add Modal</a>') 
    , $remove_modal = $('<a href="#">Remove Modal</a>') 
    , $hidden_info_modals = $('input[id=game_info_throbber][type=hidden]') # SECOND INJECTION HERE 
    ; 

    $add_modal.click(function(e) { 
    e.preventDefault(); 

     .append($remove_modal.clone(true)); 
    create_info_modal($li.clone()); 
    }); 

    $remove_modal.click(function(e) { 
    e.preventDefault(); 

    $(this).parent('li').remove(); 
    }); 


}); 

Используя Loop through an array in JavaScript, вот что я пытался, но он не:

var i, s, myStringArray = [ "info_throbber", "video_throbbe", "map_throbber", "picture_throbber" ], len = myStringArray.length 
for (i=0; i<len; ++i) { 
    if (i in myStringArray) { 
    s = myStringArray[i]; 
    // ... do stuff with s ... 
    $(function() { 
     var $modal_types = $('select#deal_' + s + '_modal_types') 
     , $li   = $modal_types.parent('li') 
     , $ol   = $li.parent('ol') 
     , $form   = $modal_types.closest('form') 
     , $submit  = $form.find('input[type=submit]') 
     , $add_modal = $('<a href="#">Add Modal</a>') 
     , $remove_modal = $('<a href="#">Remove Modal</a>') 
     , $hidden_info_modals = $('input[id=deal_' + s + '][type=hidden]') 
     ; 

     $add_modal.click(function(e) { 
     e.preventDefault(); 

     $(this).closest('li') 
      .append($remove_modal.clone(true)); 
     create_info_modal($li.clone()); 
     }); 

     $remove_modal.click(function(e) { 
     e.preventDefault(); 

     $(this).parent('li').remove(); 
     }); 


     }; 

    } 
}; 

Проблема, кажется, работает, но не полностью, поскольку он не присоединять на обоих $ add_modal и не позволяют изменения значения. Я не думаю, что необходимо глубоко понять сложный код выше, но дело в том, что он не работает, когда я просто поместил все 4 функции один за другим (сначала для info_throbber, затем video_throbber и т. Д.). .), оно работает. Таким образом, я создаю итерайтон через массив, должен работать.

спасибо за помощь,

Answer 1

У вас есть проблема с областью JavaScript. Функция внутри цикла использует только последнее значение i, предоставленное для всех итераций этой функции. Вам нужно передать индекс в функцию, чтобы она работала правильно.

См. Этот вопрос в стеке, JavaScript loop variable scope, для получения дополнительной информации.

Самое простое исправление, чтобы обернуть вашу функцию как так

var i, myStringArray = [ "info_throbber", "video_throbber", "map_throbber", "picture_throbber" ], len = myStringArray.length; 
for (i=0; i<len; ++i) { 
    (function(index) { 
    var s = myStringArray[index]; 
    // ... do stuff with s ... 
    $(function() { 
     var $modal_types = $('select#deal_' + s + '_modal_types') 
     , $li   = $modal_types.parent('li') 
     , $ol   = $li.parent('ol') 
     , $form   = $modal_types.closest('form') 
     , $submit  = $form.find('input[type=submit]') 
     , $add_modal = $('<a href="#">Add Modal</a>') 
     , $remove_modal = $('<a href="#">Remove Modal</a>') 
     , $hidden_info_modals = $('input[id=deal_' + s + '][type=hidden]') 
     ; 

     $add_modal.click(function(e) { 
     e.preventDefault(); 

     $(this).closest('li') 
      .append($remove_modal.clone(true)); 
     create_info_modal($li.clone()); 
     }); 

     $remove_modal.click(function(e) { 
     e.preventDefault(); 

     $(this).parent('li').remove(); 
     }); 

     $submit.click(function(e) { 
     var components = JSON.stringify(collect_info_modals()) 
     ; 

     $ol.find('ol.info_modal').remove(); 
     $modal_types.remove(); 

     $hidden_info_modals.val(components); 
     }); 

     var modal_types_change = function() { 
     var $el = $(this) 
      , $li = $(this).closest('li') 
      , id = $(this).val() 
      , $components = $li.find('ol.components') 
     ; 

     $components.remove(); 

     get_modal_structure(id, $li.find('select')); 
     }; 

     $modal_types.attr({ id: null, name: null }); 

     $li.remove(); 

     var create_info_modal = function($modal, modal_type_id) { 

     var $select = $modal_types.clone(); 

     if($modal.find('select').length) { $select = $modal.find('select'); } 

     $select.val(modal_type_id); 
     $select.change(modal_types_change); 

     $modal.prepend($select); 
     $modal.append($add_modal); 

     $ol.append($modal); 
     }; 

     var collect_info_modals = function() { 
     var $info_modals = $ol.find('ol.components') 
      , components = [] 
     ; 

     $.each($info_modals, function(_, $info_modal) { 
      $info_modal = $($info_modal); 

      var info_modal = {} 
      , $components = $info_modal.find('li.component input') 
      , modal_id = $info_modal.parent('li').find('select').val() 
      ; 

      info_modal['modal_id'] = modal_id; 

      $.each($components, function(_, component) { 
      component = $(component); 

      key = component.attr('name'); 
      val = component.val(); 
      info_modal[key] = val; 

      component.remove(); 
      }); 

      $info_modal.parent('li').remove(); 
      components.push(info_modal); 
     }); 

     return components; 
     }; 

     function get_modal_structure(id, $select) { 
     // Grab modal structure 
     var url = '/admin/modal_types/modal_structure?id='+id; 

     $.getJSON(url, function(modal_structure) { 
      var $ol = $('<ol class="components">'); 

      modal_structure.forEach(function(component){ 
      $ol.append(build(component)); 
      }); 

      $ol.insertAfter($select); 
     }); 
     }; 

     function build(component, value) { 

     value = value || ''; 

     var text_maxlength = 300 
      , $li = $('<li class="component string input stringish" />') 
      , $label = $('<label>'+component+'</label>') 
      , $input = $('<input name="'+component+'" type="text" required="required" maxlength='+text_maxlength+' value="' + value + '"/>') 
     ; 

     // validations 
     if(component.match(/^text/)) { 
      $input.attr('maxlength', text_maxlength); 
     } 

     $li 
      .append($label) // returns the LI NOT THE LABEL 
      .append($input); 

     return $li; 
     }; 



     (function() { 
     var hidden_info_modals = ($hidden_info_modals.val().length) ? $hidden_info_modals.val() : '[]'; 

     hidden_info_modals = JSON.parse(hidden_info_modals); 

      hidden_info_modals.forEach(function(info_modal) { 
       var modal_type_id 
       , $info_modal = $li.clone(true) 
       , $ol = $('<ol class="components">'); 
      ; 

       modal_type_id = info_modal['modal_id']; 

       delete info_modal['modal_id']; 

       for (var key in info_modal) { 
        $ol.append(build(key, info_modal[key])); 
       } 

       $info_modal.append($ol) 
       $info_modal.append($remove_modal.clone(true)) 
       create_info_modal($info_modal, modal_type_id); 
      }); 
     })(); 

     create_info_modal($li.clone(true)); 

    }); 
    })(i); 
} 

Кроме того, вы должны удалить if (i in myStringArray), как только нужно, когда вы делаете петлю Еогеасп над атрибутами объекта, а не когда вы зацикливание над индексами массива.