jQuery метод для добавления TextBox

Question

ОБНОВЛЕНО Я новичок в jQuery, но программировал около двух лет на C#. Я хотел создать метод jQuery, который будет использоваться несколько раз, чтобы добавить текстовые поля. Я думал, что создаю функцию jQuery с параметрами, которые я бы установил с кнопок при нажатии. Вот мой JQuery код, это привычка обязательно работать, как я новичок, но, безусловно, даст рабочий процесс, что я намеревался достичь

$(document).ready(function() { 

function add(someClass) { 

    var count = $("."+someClass).length; 

    if (count <= 20) { 

     var newTextBox = $(document.createElement('text')); 

     newTextBox.appendTo("."+ someClass+":last"); 

     //$('.approvers:last').append($("<input type='text' value='' />")); 
    } 
} 

});

Вот как я намереваюсь вызывать функцию с помощью кнопок onclick.

<input type="button" value="+" id="someId" class="someCssClass" onclick="addText('approvers')" /> 

Я делаю это, чтобы избежать написания того же кода, чтобы вставлять текстовые поля, имеющие разные классы. Так ли это можно сделать? Все, что я хочу, это добавить новый TextBox в то же время, указав его класс из jquery.

Answer 1

Ваш код поодаль, попробуйте следующее:

<input type="button" value="+" id="someId" class="addButton" data-target-class="someClass"/> 

<div class="someClass"> 
</div> 

И на JavaScript:

$(document).ready(function(){ 
    // Define a click handler for any input with the class addButton 
    $('input.addButton').click(function(){ 
     // Extract the class that this input button is targeting 
     var target_class = $(this).attr('data-target-class'); 
     // Add a textarea to that target 
     $("."+target_class).append("<textarea></textarea>"); 
    }); 
}); 

Вот пример: http://jsfiddle.net/1sfz4sda/

Answer 2

Я тестировал ниже код и он работает , не помещайте свою функцию внутрь документа. уже

DEMO: http://liveweave.com/RkHq5o

Вот Код JavaScript

 
     function addText(cssClass) { 
 
     
 
      var count = $("."+cssClass).length; 
 
     
 
      if (count <= 20) { 
 
     
 
       var newTextBox = $(document.createElement('textarea')); 
 
     
 
       newTextBox.appendTo("."+cssClass); 
 
      
 
      } 
 
     
 
     }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<input type="button" value="+" id="someId" class="someCssClass" onclick="addText('approvers')" /> 
 
    
 
<div class="approvers"></div>