如何在表单元素的值更改时重置数组的计数器?

时间:2013-03-30 22:48:57

标签: javascript jquery arrays loops counter

我必须为5000多个不同的组合创建业务规则(150多个项目,每个组合6-10组选项)。我已创建此功能以自动生成组合,但我希望能够更改计数器以便我可以跳过某些组合。如何修改函数,以便在表单元素的值更改时正确重置数组计数器?我相信这也需要函数反向并在数组计数器更改时更改表单元素的值。

我为表单元素(在change上创建了单独的函数,以迭代数组(在click上,并且两个函数都将当前组合写入相同的目标(即#current_body_part#current_description。这两个函数还从这些目标onload获取文本,以编程方式设置数组计数器和表单元素值,但我无法动态更新它们。我在这里发布了一个代码的工作示例:http://jsfiddle.net/chayacooper/SvqM5/

编辑 - 我不熟悉以这种方式使用数组,我对其他方法(例如使用jQuery.each()持开放态度,但是将它应用到我的代码中需要一些帮助。

遍历数组的函数

$(document).ready(function(){ 
    // Counters start at value displayed in #current_body_part & #current_description
    var bodyPart = new Array ("Shoulders", "Waist", "Height");
    var counterBodyPart = bodyPart.indexOf($('#current_body_part').innerHTML);          
    var description1 = new Array ("Narrow", "Average", "Wide");   
    var description1Number = description1.indexOf($('#current_description').innerHTML); 
    var description2 = new Array ("Short", "Average", "Tall");
    var description2Number = description2.indexOf($('#current_description').innerHTML);  

  $('#next').click(function(){   
      if (bodyPart[counterBodyPart] === "Shoulders" || bodyPart[counterBodyPart] === "Waist" ){      
      if (description1Number < description1.length){
  $('#current_body_part').innerHTML = bodyPart[counterBodyPart];    
  $('#current_description').innerHTML = description1[description1Number];       
       description1Number++           
         description2Number = 0;    
      } else if (counterBodyPart < bodyPart.length){
  $('#current_body_part').innerHTML = bodyPart[counterBodyPart];       
       counterBodyPart++;
       description1Number = 0;
      } 
  }         
      if (bodyPart[counterBodyPart] === "Height"){      
      if (description2Number < description2.length){
  $('#current_body_part').innerHTML = bodyPart[counterBodyPart];    
  $('#current_description').innerHTML = description2[description2Number];       
       description2Number++ 
         description1Number = 0;          
      } else if (counterBodyPart < bodyPart.length){
  $('#current_body_part').innerHTML = bodyPart[counterBodyPart];       
       counterBodyPart++;
       description2Number = 0;
      } 
  }                   
 });
});

表单元素的功能

 $('select[name="body_part"]').change(function () {
     writeVal();
     current_description.innerHTML = '';
     $('input[name="current_description"]').val(''); 
 });
 $('input:radio[name="description"]').change(function () {
     writeVal();         
 });
function writeVal() {
    var body_part = $("select[name=body_part] option:selected").val();
    current_body_part.innerHTML = body_part;
    $('input[name="current_body_part"]').val(body_part);  

    var description = $("input:radio[name=description]:checked").val(); 
    current_description.innerHTML = description;
    $('input[name="current_description"]').val(description);         
}

0 个答案:

没有答案