동적 양식 필드 및 업데이트 필드 값을 추가

Question

난 당신이 필드를 추가 할 수있는 양식이 있습니다 http://jsfiddle.net/ytrkqr6a/2/

$(document).ready(function() { 
    var max_fields  = 32; //maximum input boxes allowed 
    var wrapper   = $(".cameras"); //Fields wrapper 
    var add_button  = $(".add-camera"); //Add button ID 

    var x = 1; //initlal text box count 
    $(add_button).click(function(e){ //on add input button click 
     e.preventDefault(); 
     if(x < max_fields){ //max input box allowed 
      x++; //text box increment 
      $(wrapper).append('<div class="form-group"><input type="text" name="camera '+ x +'" value="Camera '+ x +'" placeholder="Camera '+ x +'" class="form-control cameras" readonly /> <a href="#" class="remove-camera">Remove</a></div>'); //add input box 
     } 
    }); 

    $(wrapper).on("click",".remove-camera", function(e){ //user click on remove text 
     e.preventDefault(); $(this).parent('div').remove(); x--; 
    }) 
}); 
<div class="cameras"> 
      <div class="camera-field"><button class="add-camera btn btn-primary">+ Add Camera</button></div> 
      <div style="clear:both;"></div> 

      <div class="form-group"><input type="text" name="camera" value="" placeholder="Camera 1" class="form-control cameras" readonly /></div> 

      </div> 

모두가 필드를 추가 잘 작동하지만 내가 끊었있어 어디 필드 중 하나 제거 할 때입니다

카메라 1
카메라 2
카메라 3
,691 : 다음 숫자 순서는 내가 적절한 숫자 순서에 추가 할 때마다 머물거나 필드를 제거하려면 나머지 필드를 업데이트 할 수 있도록 어떻게 .. 하차등 ...

감사합니다.

Answer 1

jQuery "each"루프를 추가하여 제거 링크를 클릭 할 때마다 입력란을 지정하고 이름을 지정하고 값을 다시 입력했습니다. 함수에 전달 된 각 값을 사용할 때 루프의 현재 반복에있는 항목의 인덱스이며, 변수 elm을 사용했습니다. 각 입력 필드는 camerasCounter로 분류되므로 $ (this)를 사용하여 루프에서 입력 요소를 쉽게 호출 할 수 있습니다. 여러분이 저에게 묻는다면, 각각은 jQuery의 매우 유용한 부분입니다.

http://jsfiddle.net/v76zn30o/2/

html로

<div class="cameras"> 
      <div class="camera-field"><button class="add-camera btn btn-primary">+ Add Camera</button></div> 
      <div style="clear:both;"></div> 

      <div class="form-group"><input type="text" name="camera" value="" placeholder="Camera 1" class="form-control camerasCounter" readonly /></div> 

      </div> 

및 jQuery를

$(document).ready(function() { 
var max_fields  = 32; //maximum input boxes allowed 
var wrapper   = $(".cameras"); //Fields wrapper 
var add_button  = $(".add-camera"); //Add button ID 

var x = 1; //initlal text box count 
    $(add_button).click(function(e){ //on add input button click 
     e.preventDefault(); 
     if(x < max_fields){ //max input box allowed 
      x++; //text box increment 
      $(wrapper).append('<div class="form-group"><input type="text" name="camera '+ x +'" value="Camera '+ x +'" placeholder="Camera '+ x +'" class="form-control camerasCounter" readonly /> <a href="#" class="remove-camera">Remove</a></div>'); //add input box 
     } 
    }); 

    $(wrapper).on("click",".remove-camera", function(e){ //user click on remove text 
     e.preventDefault(); $(this).parent('div').remove(); 

     $(".camerasCounter").each(function(elm){ 
      x = elm + 1 
      $(this).attr({ 
       "placeholder": "Camera " + x, 
       "name": "Camera " + x, 
       "value": "Camera " + x 
      });    
     }); 



    }); 

});