javascript - 表单克隆唯一标识

Question

我想克隆一个表单并且不修改该表单会影响原始表单。如何给表单的每个实例一个唯一的 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');
    });
});

​</p>

谢谢你！

Answer 1

当您克隆时还添加一个动态 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++
    });
});