给一系列克隆复选框字段一个唯一名称的困难- javascript

Difficulties giving a unique name to a serie of cloned checkboxes field - javascript

本文关键字：唯一 javascript 一个 一系列 复选框 字段      更新时间：2023-09-26

我尝试为克隆复选框使用唯一的名称，而不是得到，我们说:

 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();
        }
    });
});

这是一个jsfiddle: http://jsfiddle.net/Sergelie/ULywc/

部分问题在于您的uniqueId是在change函数的作用域中声明的，因此总是从1开始。此外，您正在使用后增量运算符(uniqueId++)，将1更改为2后，您将其分配给newName。这就是为什么你会得到"1"、"11"、"111"等等。试着把unique移到window。加载(例如).

试试这个:

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

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

newName = "1"+1; // "11"
newName = 1+1; // 2

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

// Regex goes something like
// starts with a non-digit character 1 or more times 
// followed by and ending with zero or more digits
var nameParts = currentName.match(/^([^0-9]+)('d*)$/);
newName = nameParts[1] + (parseInt(nameParts[2]||0) + uniqueId++);

小提琴叉

查看这个FIDDLE

阅读下面的评论以获得解释。我相信你不再需要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;

您需要通过使用regex或substring()获得原始名称

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

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.

请查看此jsfiddle http://jsfiddle.net/houssamk/Dzr58/39/

我还重新制作并清理了事件处理程序的绑定方式。我使用$.on()而不是bind()。$.on()要好得多，因为它在创建新的克隆时动态地附加事件处理程序。

希望有所帮助

相关文章：