0

我有几个问题，我都没有单独成功解决。我通读了有关克隆单选按钮的所有问答，然后在此处发布之前尝试了许多（如果不是大多数）增量 ID 解决方案。

成功的代码让我望而却步。底部有一个 JSFiddle 链接！

1) 我想使用增量来更改克隆元素上的名称和 ID

我 [认为] 更愿意使用这种失败的方法，主要是因为我不知道在哪里放什么（即“？？”） - 当然欢迎另一种方法：

var regex = /^(.*)(\d)+$/i;
var cloneIndex = $(".newloc").length;

$("button.clone").live("click", function(){
$(this).parents(".newloc").clone()
    .appendTo("#location_container")
    .attr("id", "newloc" +  cloneIndex)
    .find("??").each(function() {
        var id = this.id || "";
        var match = id.match(regex) || [];
        if (match.length == 3) {
            this.id = match[1] + (cloneIndex);
        }
});
cloneIndex++;

});

2）我的研究表明，前一个将解决克隆的单选按钮不当行为

3) 嵌套在克隆的 div 中的是一个 JQuery，依赖于单选按钮选择，在源中运行，但在克隆中失败。

4）尽我所能，我无法找出删除按钮功能的删除最后一个克隆脚本 - 很容易，我确定我错过了一些非常明显的东西。这失败了：

$("button.remove").live("click", function(){
$(this).parents(".newloc").remove();

});

5）如果屏幕向下滚动以在框架顶部显示新克隆的顶部，我会喜欢它。

这一切在理论上听起来很容易，但在 5 天和一个周末之后，我感到困惑和沮丧，所以我呼吁您提供帮助和帮助。

我在这里制作了我当前解决方案的 JSFiddle。

非常感谢您的帮助！

4

1 回答 1

0

是的，它确实。我所有的问题都得到了解答！

在一位才华横溢的加州大学伯克利分校学生的帮助下 - 谢谢杰瑞！

$(document).ready(function () { 

    $('.remove').hide();//hiding the remove button
     var radioCounter = 0;
    // var prot = $(document).find('.newloc');

    $('.add').click(function () {

        //Preserve original location settings (first two in the list all times)
        //The reason for this if because when the form is first cloned, the names
        //of the radio buttons have not been changed yet, so the value of the original
        //radio buttons are lost, so we need to preserve them and then re-set them to
        //accordingly later.
        var originalConfVal = $('input[name="conference[0]"]:checked').val();
        var originalRoleVal = $('input[name="role[0]"]:checked').val();

        // this duplicates the section, and clears the values in the clone, adds a new class and places the clone
        $('.add_location').clone(true).find('input:not(:radio)').val("").end().removeClass("add_location").addClass("newloc").appendTo($('#location_container'));
        $('.newloc').find('.remove').show();
        //Set correct incremented names
        radioCounter += 1;

        var $allConfs = $('.authradio[name^="conference["]');
        var $allRoles = $('.authradio[name^="role["]');

        //Get last two conference authradios and set incremented names
        $allConfs.slice(-2, $allConfs.length).attr('name', 'conference[' + radioCounter + ']');

        //Get last 3 role authradios and set incremented names
        $allRoles.slice(-3, $allRoles.length).attr('name', 'role[' + radioCounter + ']');

        //Make the newly cloned radio buttons be checked at "no" for conference
        $('input[name="conference[' + radioCounter + ']"][value="no"]').prop("checked", "checked");
        $('input[name="role[' + radioCounter + ']"][value="Attendee"]').prop("checked", "checked");

        //Hide new sliding conference menu
        $('.hideme:last').hide();

        //Reset original radio buttons to preserved values
        $('input[name="conference[0]"][value="' + originalConfVal + '"]').prop("checked", "checked");
        $('input[name="role[0]"][value="' + originalRoleVal + '"]').prop("checked", "checked");

// -- ---------------------------------------------------- -->
        // this fixes the date picker repetition issue
        $('.authdepart:last').removeClass('hasDatepicker').attr('id', "").datepicker({
            numberOfMonths: 3,
            showButtonPanel: true
        });
        $('.authreturn:last').removeClass('hasDatepicker').attr('id', "").datepicker({
            numberOfMonths: 3,
            showButtonPanel: true
        });

        // clone styling
         $('.newloc:last').prepend(
        $('<div/>').addClass("auth_98").css('border', 'none').append(
        $('<legend/>').append('New Location')));    

         //Scroll container
        $('#location_container').animate({scrollTop: $('#location_container')[0].scrollHeight}, "slow");

    });

    $('.hideme').hide();

    $('.authradio').on('change', function () {
        if ($(this).val() == 'yes') $(this).parent().find('.hideme').slideDown();
        else $(this).parent().find('.hideme').slideUp();
    });

    $('.datepicker').datepicker({
        numberOfMonths: 3,
        showButtonPanel: true
    });

    $("button.remove").on("click", function(){
        $(this).parents(".newloc").remove();
   });

});
于 2013-05-10T23:14:50.377 回答