jquery - 从代码块创建一个 jQuery 函数

Question

我怎样才能把这段代码变成一个函数，我需要做的就是将它绑定到一个 div id，并为输入传递参数name和id参数？

            var startingNo = 3;
            var $node = "";
            for(varCount=0;varCount<=startingNo;varCount++){
                var displayCount = varCount+1;
                $node += '<p><input type="text" name="duties'+displayCount+'" id="duties'+displayCount+'"><span class="removeVar">Remove Variable</span></p>';
            }

            //add them to the DOM
            $('#duties').prepend($node);

            //remove a textfield
            $('#duties').on('click', '.removeVar', function(){
               $(this).parent().remove();
               varCount--;
            });

            //add a new node
            $('#addVar').on('click', function(){
            varCount++;
            $node = '<p><input type="text" name="duties'+varCount+'" id="duties'+varCount+'"><span class="removeVar">Remove Variable</span></p>';
            $(this).parent().before($node);
            });

Answer 1

你的意思是你想要一个 jQuery 原型函数，它的行为类似于$('div').doSomething(name, id);？在这种情况下，它是：

$.fn.doSomething = function (name, id) {...};

Answer 2

我不知道我是否正确理解它，但它只是在标签创建和 jquery 选择器中连接：

function myFunction(name, id) {
    var startingNo = 3;
    var $node = "";
    for(varCount = 0; varCount <= startingNo; varCount++) {
        var displayCount = varCount + 1;
        $node + = '<p><input type="text" name="' + name + displayCount + '" id="' + id + displayCount + '"><span class="removeVar">Remove Variable</span></p>';
    }

    //add them to the DOM
    $('#' + id).prepend($node);

    //remove a textfield
    $('#' + id).on('click', '.removeVar', function(){
       $(this).parent().remove();
       varCount--;
    });

    //add a new node
    $('#addVar').on('click', function(){
        varCount++;
        $node = '<p><input type="text" name="' + name + varCount + '" id="' + id + varCount + '"><span class="removeVar">Remove Variable</span></p>';
        $(this).parent().before($node);
    });
}