Creating a jQuery function from a block of code

Question

How can I turn this code into a function where all I need to do is bind it to a div id, and pass in name and id parameters for the inputs?

            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);
            });

var newfun=$(function myfun(name,id){...your code});

SRy
– SRy

2013-03-08 17:16:45 +00:00
Commented Mar 8, 2013 at 17:16 — SRy
– SRy, Commented Mar 8, 2013 at 17:16

Derek Henderson · Accepted Answer · 2013-03-08 17:25:00Z

1

Do you mean you want a jQuery prototype function, something that behaves like $('div').doSomething(name, id);? In that case, it's:

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

answered Mar 8, 2013 at 17:25

Derek Henderson

9,7364 gold badges46 silver badges72 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

RMalke · Accepted Answer · 2013-03-08 17:17:55Z

I don't know if I get it correctly, but it is just concatenate in the tags creations and in jquery selector:

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);
    });
}

Collectives™ on Stack Overflow

Creating a jQuery function from a block of code

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related