Добавить каждый раз, когда нажимаете кнопку ADD

Question

НУЖНА ПОМОЩЬ! Как добавить каждый раз, когда я нажимаю кнопку «Добавить»?

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

Это начинается с 0, после того как я нажимаю его воля плюс 1 станет 1, затем 2 и т.д.

HTML:

<div id="add_form"> 

    <div class="form-field"> 

     <div class="field"> 

      <div class="no">0</div> 

     </div> 

    </div> 

</div> 

<a href="#" id="add_field" class="btn btn-default">Add </a> 
<p><br /></p> 

JQuery:

$(document).ready(function() { 

    var MaxInputs  = 8; 
    var InputsWrapper = $("#add_form"); 
    var AddButton  = $("#add_field"); 

    var x = InputsWrapper.length; 
    var FieldCount=1; 

    $(AddButton).click(function (e) { 

     if(x <= MaxInputs) { 

      FieldCount++; 

      $(InputsWrapper).append('<div class="field"><div class="no">1</div></div>'); 
      x++; 

     } 

     return false; 

    }); 

}); 

Мой JQuery довольно беден , вам нужна помощь от вас, ребята.

Также здесь ссылка jsfiddle.

http://jsfiddle.net/fzs77/

Действительно ценю вашу помощь.

Answer 1

Вы 1 жёстко, поэтому он не может изменить. Делают это так:

$(InputsWrapper).append('<div class="field"><div class="no">' + x + '</div></div>'); 

Проверить это JSFiddle с рабочим демо.

Answer 2

Вы должны указать переменную, содержащую номер внутри html, который вы добавляете. Также перемещайте переменную FieldCount до уровня вызова функции добавления, чтобы отобразить правильный результат. Как так:

$(AddButton).click(function (e) { 

    if(x <= MaxInputs) { 

     $(InputsWrapper).append('<div class="field"><div class="no">' + FieldCount + '</div></div>'); 
     x++; 
     FieldCount++; 

    } 

    return false; 

}); 

Answer 3

Попробуйте jsfiddle:
http://jsfiddle.net/fzs77/7/

<div id="add_form"> 


<div class="form-field"> 

     <div class="field"> 

      <div class="no">0</div> 

     </div> 

    </div> 

</div> 

<a href="#" id="add_field" class="btn btn-default">Add </a> 
<p><br /></p> 

JS файл

$(document).ready(function() { 

    var MaxInputs  = 8; 
    var InputsWrapper = $("#add_form"); 
    var AddButton  = $("#add_field"); 

    var x = InputsWrapper.length; 
    var FieldCount=0; 

    $(AddButton).click(function (e) { 

     if(x <= MaxInputs) { 

      FieldCount++; 



    $(InputsWrapper).append('<div class="field"><div class="no">' + FieldCount + '</div></div>'); 



     } 

     return false; 

    }); 

}); 

Answer 4

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

http://jsfiddle.net/sdMCH/

$(document).ready(function() { 
    $('#add_field').click(function (e) { 
      var x=$(".no");    
      x[0].innerHTML = (parseInt(x[0].innerHTML,10)+1); 
     } 
    ); 
});