JQuery - 選擇動態命名的元素用於公式

Question

我有一個問題，我很難過。我正在構建一個輸入字段，然後在方程中使用的表單。然而，棘手的部分是我有額外的字段集和輸入動態地創建和命名（以便當用戶點擊「添加新柵欄」時，有第二個「postQuantity」名爲「postQuantity2」，然後第三個將被稱爲「postQuantity3」等等）。我的問題是，如何改變我現有的方程來選擇僅用於其特定部分（添加的每個單獨的圍欄）的形式的元素？ 例如：當我輸入到素材2中時，它將在JS等式中使用該輸入，並將答案插入到postQuantity2中，然後使用postQuantity3等插入素材3等。任何想法都將不勝感激，因爲我不知道從哪裏開始這個。

這裏是我到目前爲止的代碼段： 小提琴 - http://jsfiddle.net/gv0029/QGW7R/

HTML：

<fieldset id="fence"> 
    <div id="inputFence1" class="clonedInputFence"> 
     <fieldset id="fenceDescripton"> 
      <legend><strong>Fence Description</strong> 

      </legend> 
      <label>Footage: 
      <input type="number" id="footage" name="footage" value="" /></label> 
      <select name="fenceHeight" id="fenceHeight"> 
       <option value="select">Select Fence Height</option> 
       <option value="6" id="fH6">6 Ft.</option> 
       <option value="8" id="fH8">8 Ft.</option> 
      </select> 
     </fieldset> 

     <fieldset id="post"> 
      <legend><strong>Post Type</strong> 

      </legend> 

      <label>Post Quantity: 
       <input type="postQuantity" name="postQuantity" id="postQuantity" value="" /> 
      </label> 
      <select name="postMeasurements" id="postMeasurements"> 
       <option value="select">Select Post Measurements</option> 
       <option value="23/8 x .065 x 8" id="23/8 x .065 x 8">2 3/8 x .065 x 8</option> 
       <option value="23/8 x .095 x 8" id="23/8 x .095 x 8">23/8 x .095 x 8</option> 
      </select> 
     </fieldset> 

    </div> 
</fieldset> 
    <div> 
     <input type="button" id="btnAddFence" value="Add Another Fence" /> 
     <input type="button" id="btnDelFence" value="Remove Fence" /> 
    </div> 

JS：

//Quantity for Posts 
    $('#footage, #manualOverrideNo').bind('keypress keydown keyup change', function(){ 

      var footage = parseFloat($(':input[name="footage"]').val(),10); 
      var total = ''; 

      if(!isNaN(footage)){ 
       total = Math.ceil(footage /7); 
       $(':input[name="postQuantity"]').val(total.toString()); 
      } else { 
       $(':input[name="postQuantity"]').val(""); 
      } 
    }); 

//Dynamic Fence Input Fields 
    $('#btnAddFence').click(function() { 
       var num  = $('.clonedInputFence').length; // how many "duplicatable" input fields we currently have 
       var newNum = new Number(num + 1);  // the numeric ID of the new input field being added 

       // create the new element via clone(), and manipulate it's ID using newNum value 
       var newElem = $('#inputFence' + num).clone().attr('id', 'inputFence' + newNum); 

       //Fieldset creation 
       newElem.find('fieldset').attr('id', 'fence' + newNum); 

       //Fence Description 
       newElem.find("select[name=fenceHeight]").attr('id', 'fenceHeight' + newNum).attr('name', 'fenceHeight' + newNum); 
       newElem.find(':input[name="footage"]').attr('id', 'footage' + newNum).attr('name', 'footage' + newNum); 

       //Post Type 
       newElem.find(':input[name="postQuantity"]').attr('id', 'postQuantity' + newNum).attr('name', 'postQuantity' + newNum); 
       newElem.find("select[name=postMeasurements]").attr('id', 'postMeasurements' + newNum).attr('name', 'postMeasurements' + newNum); 

       // insert the new element after the last "duplicable" input field 
       $('#inputFence' + num).after(newElem); 

       // enable the "remove" button 
       //$('#btnDel').attr('disabled',''); 
       $('#btnDelFence').removeAttr('disabled'); 
      }); 

      $('#btnDelFence').click(function() { 
       var num = $('.clonedInputFence').length; // how many "duplicatable" input fields we currently have 
       $('#inputFence' + num).remove();  // remove the last element 

       // enable the "add" button 
       //$('#btnAdd').attr('disabled',''); 
       $('#btnAddFence').removeAttr('disabled'); 

       // if only one element remains, disable the "remove" button 
       if (num-1 == 1) 
        $('#btnDelFence').attr('disabled','disabled'); 
      }); 

      $('#btnDelFence').attr('disabled','disabled'); 

Answer 1

如果動態創建的元素，你可以通過索引組字段組並將其與字段關聯：

newElem.data('index', currentIndex); 

當您更新值，然後你可以使用這個索引到相同的字段集內更新的相應字段：

$field = $(event.target).closest(':input[name="footage"]'); // event.target is the element that first registered the event 
index = $($field).data('index'); 
... 
$(':input[name="postQuantity"][data-index="' + index + '"]').val(total.toString()); 

你可以抓住在事件處理程序的事件對象：

$(...).bind(..., function(event) {