克隆并设置数据名称

时间:2015-12-29 23:09:46

标签: jquery

尝试克隆选择下拉框并添加额外的随机数据名称值。

在我的所有测试中它都不起作用。任何人都知道如何在下面的单行中?

这部分顺利进行:

$('.copy').on('click', function () {
    var cloneId = $(this).attr('data-name');
    $(".clone-"+cloneId).clone().insertAfter(".clone-"+cloneId+":last").removeClass('clone-'+cloneId).removeProp('required');
});

在这里,我最后试图更改数据名称。这部分不起作用。

$('.copy').on('click', function () {
    var cloneId = $(this).attr('data-name');
    $(".clone-"+cloneId).clone().insertAfter(".clone-"+cloneId+":last").removeClass('clone-'+cloneId).removeProp('required').attr("data-name", ''+cloneId+'-333');
});

其中'-333'应为随机数。

更新 现在正在运行,但仍然会在“点击”时克隆每个项目的随机值。

   $('.copy').on('click', function () {
        var cloneId = $(this).attr('data-name');
        var cloneFull = $(".clone-"+cloneId).attr('id');
        randomValue = parseInt(Math.random()*999999,10);


        $(".clone-"+cloneId).clone().insertAfter(".clone-"+cloneId+":last").removeClass('clone-'+cloneId).prop('required', false).attr("name", cloneFull + '-' + randomValue);

    });

1 个答案:

答案 0 :(得分:2)

这将处理原始问题(具有随机值)以及需要其自己的唯一随机数的多个元素的扩展问题。

$('.copy').on('click', function () {
    var initialName= $(this).attr('data-name'),
        className = "clone-" + initialName,
        elements = $('.' + className);


    elements
        .clone()
        .insertAfter(elements.last())
        .removeClass(className)
        .prop('required', false)
        .attr("name", function(i,v){ // use the version that runs a function for each element in the group. You could have used .each as an alternative.
                var randomValue = parseInt(Math.random()*999999,10),
                    actualId = this.id; // moved the id retrieval in the loop as i think you want the id of each element to be used.
                return actualId + '-' + randomValue;
            });
});

https://jsfiddle.net/2t3e1nf2/1/

更新了演示

我已在变量中缓存$(".clone-"+cloneId)部分以提高性能和清晰度。我还将一些变量重命名为易读性(就我而言,所以你可以将它们再改为