Как сделать этот JQuery более многоразовым? - PullRequest
Новая
       11

Как сделать этот JQuery более многоразовым?

1 голос
/ 13 июля 2011

Я хотел бы иметь возможность перейти в "Райдер" или что-то еще и сделать добавить / удалить сделать то же самое, но для других предметов, кроме райдера, таких как субсчета. 

$(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

Ответы [ 2 ]

1 голос
/ 14 июля 2011

Вы захотите создать плагин из этого кода. Подход заключается в том, что вам нужно больше возможностей, добавьте опции в плагин. Я начал плагин ниже. Также код, заменяющий идентификаторы элементов (и т. Д.) Должен быть более общим Ниже я добавил регулярное выражение для замены числа в id элемента.

Добавьте обратные вызовы, где это необходимо для выполнения конкретных действий по реализации / настроек пользовательского интерфейса. Поэтому в приведенном выше примере добавьте код для сброса сообщения 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'); }
});
0 голосов
/ 14 июля 2011

Похоже, вы определяете какую-то систему управления для этого модуля "Райдер" (я не знаю, именно то, что я вижу).Чтобы улучшить этот код, я бы использовал несколько OO js.Оттуда, когда есть необходимость сделать его более общим (например, изменяемые имена классов), вы задаете параметры этих селекторов для конструктора.Это также поможет сделать код гораздо более модульным для тестирования!

Если вам нужны конкретные примеры кода, я напишу что-нибудь, просто дайте мне знать.

...