0

いくつかの問題がありますが、個別に解決できたものはありません。複製されたラジオ ボタンに関するすべての Q&A を読み、ここに投稿する前に、ほとんどではないにしても多くの増分 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 に答える