表单克隆唯一ID

时间:2012-09-10 13:54:42

标签: javascript jquery forms uniqueidentifier cloning

我想要克隆一个表单,而不是修改该表单效果的原始表单。如何为表单的每个实例提供一个唯一的ID,以便元素不重复?

$(document).ready(function() {
    // shows / hides results based on selection
    $(".categories-select").live("change", function() {
        if ($(this).val() == 'dinner') {
            $('.dinner').removeClass('hide');
            // toggles dinner results, sub menus
            $(this).parent('.controls').find('.restaurant-submenu-select').removeClass('hide');
        }
    });    

    // Duplicates category select menu 
    $(".add-activity").click(function() {
        $(".activity-category")
                       .clone()
                       .removeClass('activity-category')
                       .appendTo("#we-want-to")
                       .find('.restaurant-submenu-select')
                       .addClass('hide');
    });    

    $(".add-activity-alternate").click(function() {
        $(".activity-category-alternate")
                       .clone()
                       .removeClass('activity-category-alternate')
                       .appendTo("#we-want-to")
                       .find('.restaurant-submenu-select, .results-table')
                       .addClass('hide');
    });
});

谢谢!

1 个答案:

答案 0 :(得分:0)

克隆时还添加动态ID

var id = 0;

(function() {
    yourClone.attr('id', 'something-' + id);
    id++
});

在你的代码中有类似的东西:

$(document).ready(function() {

    var id = 0;

    // shows / hides results based on selection
    $(".categories-select").live("change", function() {
        if ($(this).val() == 'dinner') {
            $('.dinner').removeClass('hide');
            // toggles dinner results, sub menus
            $(this).parent('.controls').find('.restaurant-submenu-select').removeClass('hide');
        }
    });    

    // Duplicates category select menu 
    $(".add-activity").click(function() {
        $(".activity-category")
                       .clone()
                       .removeClass('activity-category')
                       .appendTo("#we-want-to")
                       .find('.restaurant-submenu-select')
                       .addClass('hide')
                       .attr('id', 'something' + id);
        id++
    });    

    $(".add-activity-alternate").click(function() {
        $(".activity-category-alternate")
                       .clone()
                       .removeClass('activity-category-alternate')
                       .appendTo("#we-want-to")
                       .find('.restaurant-submenu-select, .results-table')
                       .addClass('hide')
                       .attr('id', 'something' + id);
        id++
    });
});