Question

我希望能够传入“骑手”或其他东西，并添加/删除做同样的事情，但对于骑手之外的其他项目，如子帐户。

$(function(){
    var template = $('#riders-div .rider-new:first').clone(),
        ridersCount = 0;

    var addRider = function(){
        ridersCount++;
        var rider = template.clone().removeClass("dontshow").find(':input').each(function(){
            var newId = this.id.replace('-', 's['+ ridersCount + '][') + ']';
            $(this).prev().attr('for', newId); // update label for (assume prev sib is label)
            this.name = this.id = newId; // update id and name (assume the same)
        }).end() // back to .rider
        .appendTo('#rider-exist'); // add to container
        $('#rider-message').html('').removeClass("ui-state-highlight").removeClass("ui-state-error");
    };

    $('#addButton').click(addRider()); // attach event

$("#removeButton").click(function () {
  $('#riders-div .rider-new:last').remove();
$('#rider-message').html('').removeClass("ui-state-highlight").removeClass("ui-state-error");
     });
});

https://gist.github.com/1081078

Answer 1

您需要使用此代码创建插件。该方法是您需要更多功能，为插件添加选项。我在下面启动了插件。代码替换元素ID（等）也需要更通用。下面我添加了一个正则表达式来替换元素id中的数字。

在必要时添加回调以执行特定于实施的操作/ UI调整。因此，在上面的示例中，添加代码以在after回调中重置消息html（$('#rider-message').html('')）。

after: function(i){
    $('#rider-message').html(''); //...
}

等等

$.fn.cloneForm = function(options){
    var self = this, count = 0, 
        opts = $.extend({}, {
            after: function(){}, 
            template:'', 
            prependTo: '', 
            on: 'click'
        }, options),
        template = $(opts.template).clone(); // unmodified clone

    self.bind(opts.on + '.cloneForm', function(){
        count++;
        template.clone().find(':input').each(function(){
            var newId = this.id.replace(/[0-9]/i, count) // replace number
            $(this).prev().attr('for', newId);           // update label for
            this.name = this.id = newId;                 // update id and name (assume the same)
        }).end().prependTo(opts.prependTo);
        opts.after.call(self, count);                    // run callback
    });
}

用法：

$('#addButton').cloneForm({ 
    template: '#riders-div .rider-new:first',
    prependTo: '#riders-div',
    after: function(){ console.log('im done'); }
});

Answer 2

看起来你正在为这个“骑士”模块定义某种管理系统（我不知道，正是我所看到的）。我开始改进这段代码的方法是使用一些OO js。从那里，当需要使它更通用（例如可更改的类名）时，您将这些选择器参数设置为构造函数。它还具有使代码更加可单元测试的好处！

如果您想要一些特定的代码示例，我会发布一些内容，请告诉我。

如何使这个jquery更可重用？

2 个答案: