为一系列克隆的复选框字段指定唯一名称的困难-javascript

我尝试为克隆的复选框指定唯一的名称，而不是获取，比如：

 Origin_1, Origin_2, Origin_3, for cloned 1, 2, 3 of the same element,

我得到：

Origin_1, Orignin_11, Origin_111

我理解这个问题：克隆，使用过去的克隆作为源名称。我不知道应该采取什么样的方法来应对。要么找到使用原始名称的方法，要么将上一个克隆的名称修剪一个字符，并确保计数器不再从头开始。谢谢你的提示

以下是javascript代码：

$(window).load(function() { 
    var bindFunction = $('#quickmenuall input:checkbox').change(function(){ 
        var uniqueId = 1;
        var currentName = $(this).attr('name'); 
        newName = currentName + (uniqueId++);
        if($(this).is(':checked')){
            var clonedClient = $(this).parent().parent().parent().parent().parent().clone(true) 
            var ori = $(this).parent().parent().parent().parent().parent() 
            clonedClient.insertBefore(ori)
            $(this).attr('name', newName)
            var clonedClient = $(this);
            $(this).prop('checked', false)
        } else {
            var clonedClient = $(this);
            clonedClient.parent().parent().parent().parent().parent().remove() 
            checkbox.bind("change", bindFunction);
            bindFunction();
        }
    });
});

下面是一个JSIDLE:

currentName是一个字符串，您正在将一个整数连接到它

要解决眼前的问题，请使用正则表达式匹配currentName的数字/数字部分，并将其解析为整数，然后再将uniqueId添加到其中

更新

请阅读下面的评论以获得解释。我相信你不再需要独一无二的

input[name^=F_1_]获取所有以F_1_开头的克隆。input[name=F_1]获取原始克隆

var currentName = $(this).attr('name'); 
// We are again matching the core part of the clone element to get the itemFamily
var nameParts = currentName.match(/^([^0-9]+(_[0-9]+))(_[0-9]+)?$/);
// Then we use the attribute starts with selector and attribute equals to selector
// to get the original and all clones of with the core itemFamily name part
// the length attribute will be your next number in the item family clone.
var itemFamilyCount = $('input[name^="'+nameParts[1]+'_"], input[name="'+nameParts[1]+'"]').length;
newName = nameParts[1] + '_' + itemFamilyCount;

---

部分问题在于您的uniqueId是在change函数的作用域中声明的，所以总是以1开头。另外，您正在使用增量后操作符uniqueId++将1分配给newName后将其更改为2。这就是为什么会出现1、11、111等。例如，尝试将uniqueId移动到window.load中

试试这个：

$(window).load(function() { 
        var uniqueId = 1;

    var bindFunction = $('#quickmenuall input:checkbox').change(function(){ 
        var currentName = $(this).attr('name'); 
        newName = currentName + (uniqueId++);
        if($(this).is(':checked')){
            var clonedClient = $(this).parent().parent().parent().parent().parent().clone(true) 
            var ori = $(this).parent().parent().parent().parent().parent() 
            clonedClient.insertBefore(ori)
            $(this).attr('name', newName)
            var clonedClient = $(this);
            $(this).prop('checked', false)
        } else {
            var clonedClient = $(this);
            clonedClient.parent().parent().parent().parent().parent().remove() 
            checkbox.bind("change", bindFunction);
            bindFunction();
        }
    });
});

或者将其与同样建议的正则表达式方法相结合，或者简单地为复选框保存前缀ID

var prefix = 'checkbox_';
var uniqueId = 1;
var id1 = prefix + (uniqueId++).toString(); // checkbox_1
var id2 = prefix + (uniqueId++).toString(); // checkbox_2
var id3 = prefix + (uniqueId++).toString(); // checkbox_3

---

您需要使用regex或substring获取原始名称

我已经设法使它与子字符串一起工作，因为我知道我正在构建我的克隆，如One_1 One_2等。。。 但是，最好使用regex，比如@cbayram的另一个答案。我将建立一个正则表达式，并在有时间时更新fiddle

var lastIndexOf_ = oldName.lastIndexOf('_');
// we build the clones with and underscore + number. get substring from the beginning of     the oldName until the "_"
if (lastIndexOf_ != -1)
    oldName = oldName.substring(0,lastIndexOf_);
// else just use the oldName
var newName = oldName + '_' + i++; // build new name and increment counter.

请检查一下这个密码

我还修改并清理了事件处理程序的绑定方式。我使用$.on而不是bind.$。on更好，因为它在创建新克隆时动态附加事件处理程序

---

希望它能有所帮助

parent.parent.parent.parent.parent.parent.parent您没有这样做，请您提供一把小提琴好吗？刚刚注意到，你能把var uniqueId=1；外部更改事件，使其不会每次都被覆盖？避免使用链式父方法-尝试在此处使用最接近的更多信息：您可以设置模板并从中创建新项目-请参阅@Varider这里是我摆脱的JSFIDLE多个父方法：谢谢@cbayram，我们就到了！虽然我没有提到，但我没有意识到，在这一点上，以这种方式动态创建我的名字将变得非常重要：F_1、F_2、F_3、F_4可能会进入F_100dreds，因此在克隆时，如果F_1克隆名为F_2，我会遇到真实F_2的问题。因此，如果将结果添加到原始名称而不进行任何集群，那么您的解决方案将是完美的。我不是程序员，但我能理解和适应！你的小提琴适应了真实姓名的情况。@user3371049，我想我明白了。如果我克隆F_1两次，我可以有2个F_12s吗？还是应该是F_12和F_13？最好的解决方案是保持原始名称的完整性，作为克隆名称的基础，并为克隆2、3、4等添加一个增量数字@user3371049，但如果已经有F_11原始名称，如果您创建的F_1克隆也是F_11，则会发生冲突。是F_1_1，F_1_2，F_1_3。。。可以接受解决这一冲突吗？

var prefix = 'checkbox_';
var uniqueId = 1;
var id1 = prefix + (uniqueId++).toString(); // checkbox_1
var id2 = prefix + (uniqueId++).toString(); // checkbox_2
var id3 = prefix + (uniqueId++).toString(); // checkbox_3

var lastIndexOf_ = oldName.lastIndexOf('_');
// we build the clones with and underscore + number. get substring from the beginning of     the oldName until the "_"
if (lastIndexOf_ != -1)
    oldName = oldName.substring(0,lastIndexOf_);
// else just use the oldName
var newName = oldName + '_' + i++; // build new name and increment counter.