Question

已更新 我是jQuery的新手，但已经在C＃中编程了大约两年。我想创建一个jQuery方法，可以多次使用它来添加Textboxes。我认为我创建了一个带有参数的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

我测试了下面的代码并且它有效，不要将你的函数放在document.ready

中

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>

jQuery方法添加TextBox

2 个答案: