使用JQuery單擊單選按鈕后追加DIV僅使用父數據

Question

我想創建一個input-radio ，用戶可以在其中選擇他們的選項並在該選項內填充數據，然后擴展另一個input-radio以填充其他數據。 但是不幸的是，每當擴展無線電時，所有擴展Parent-data僅使用Parent-data ...

編輯：更改了代碼段以便更好地理解

您可以從下面看到它：

 var index = 0; $(document).on('click', '.choose_wdv', function() { //$(this).nextAll('.wdv_option:first').show(); //$(this).nextAll('.slm_option:first').hide(); $(".wdv_option").show(); $(".slm_option").hide(); }); $(document).on('click', '.choose_slm', function() { //$(this).nextAll('.slm_option:first').show(); //$(this).nextAll('.wdv_option:first').hide(); $(".slm_option").show(); $(".wdv_option").hide(); }); $(document).on('click', '.add-form-wdv_slm', addWDVSLMCombination); function addWDVSLMCombination() { index++ $("#sch8_wdvslm").append('<div class="wdv_slm_container" style="border-style: dotted; border-radius: 10px; border-width: thin; margin-top: 10px;">'+ '<div class="form-group">'+ '<label class="control-label" style="padding-left: 25px;">Select Method</label>'+ '<a href="javascript:void(0);" class="btn btn-outline-warning removeSch8wdvslm">Remove</a>'+ '<div class="input-group">'+ '<div class="radio" style="padding-left: 25px;">'+ '<label><input type="radio" required id="choose_wdv" value="wdvslm_wdv" name="schedule8WDVSLM'+ index +'" class="choose_wdv">WDV</label>'+ '<label><input type="radio" required id="choose_slm" value="wdvslm_slm" name="schedule8WDVSLM'+ index +'" class="choose_slm">SLM</label>'+ '</div>'+ '</div>'+ '</div>'+ '<div class="wdv_option" style="display:none;">'+ '<p style="padding-left: 10px;">AS PER WDV METHOD</p>'+ '<div class="schedule-container" style="border-style: dotted; border-radius: 10px; border-width: thin; border-top-left-radius: 5px; border-top-right-radius: 5px;">'+ '<div class="col-md-12">'+ '<div class="row">'+ '<div class="col-md-2">'+ '<label for="assetName">Name</label><br>'+ '<input type="text" id="assetName" name="wdvName[]" class="form-control">'+ '</div>'+ '<div class="col-md-2">'+ '<label for="assetDOP">DOP</label><br>'+ '<input type="date" id="assetDOP" name="wdvDOP[]" class="form-control date_of_purchase">'+ '</div>'+ '<div class="col-md-2">'+ '<label for="assetOC">OC</label><br>'+ '<input type="number" min="0" id="assetOC" name="wdvOC[]" class="form-control originalCost">'+ '</div>'+ '<div class="col-md-2">'+ '<label for="assetWDV">WDV</label><br>'+ '<input type="number" min="0" id="assetWDV" name="wdvWDV[]" class="form-control assWDV">'+ '</div>'+ '<div class="col-md-2">'+ '<label for="assetADD">ADD</label><br>'+ '<input type="number" min="0" id="assetADD" name="wdvADD[]" class="form-control addition">'+ '</div>'+ '<div class="col-md-2">'+ '<label for="assetEUL">EUL</label><br>'+ '<input type="number" min="0" id="assetEUL" name="wdvEUL[]" class="form-control no_of_year">'+ '</div>'+ '</div>'+ '</div>'+ '<div class="col-md-12" style="padding-bottom: 10px;">'+ '<div class="row">'+ '<div class="col-md-2">'+ '<label for="assetBDA">BDA</label><br>'+ '<input type="number" readonly min="0" id="assetBDA" name="wdvBDA[]" class="form-control bdaValue">'+ '</div>'+ '<div class="col-md-2">'+ '<label for="assetDays">Day Used</label><br>'+ '<input type="number" readonly min="0" id="assetDays" name="wdvDayUsed[]" class="form-control dayUsed">'+ '</div>'+ '<div class="col-md-2">'+ '<label for="assetRateofDep">Rate of Dep.</label><br>'+ '<input type="number" readonly min="0" id="assetRateofDep" name="wdvRate[]" class="form-control rateOfDep">'+ '</div>'+ '<div class="col-md-2">'+ '<label for="assetDepAmount">Dep. Amount</label><br>'+ '<input type="number" readonly min="0" id="assetDepAmount" name="wdvDepAmount[]" class="form-control depAmount">'+ '</div>'+ '<div class="col-md-2">'+ '<label for="assetNetBlock">Net Block</label><br>'+ '<input type="number" readonly min="0" id="assetNetBlock" name="wdvNetBlock[]" class="form-control netBlock">'+ '</div>'+ '</div>'+ '</div>'+ '</div>'+ '</div>'+ '<div class="slm_option" style="display:none;">'+ '<p style="padding-left: 10px;">AS PER SLM METHOD</p>'+ '<div class="schedule-container-slm" style="border-style: dotted; border-radius: 10px; border-width: thin;border-top-left-radius: 5px; border-top-right-radius: 5px;">'+ '<div class="col-md-12">'+ '<div class="row">'+ '<div class="col-md-2">'+ '<label for="slmassetName">Name</label><br>'+ '<input type="text" id="slmassetName" name="slmName[]" class="form-control">'+ '</div>'+ '<div class="col-md-2">'+ '<label for="slmassetDOP">DOP</label><br>'+ '<input type="date" id="slmassetDOP" name="slmDOP[]" class="form-control date_of_purchaseSLM">'+ '</div>'+ '<div class="col-md-2">'+ '<label for="slmassetOC">OC</label><br>'+ '<input type="number" min="0" id="slmassetOC" name="slmOC[]" class="form-control originalCostSLM">'+ '</div>'+ '<div class="col-md-2">'+ '<label for="slmassetWDV">WDV</label><br>'+ '<input type="number" min="0" id="slmassetWDV" name="slmWDV[]" class="form-control assWDVSLM">'+ '</div>'+ '<div class="col-md-2">'+ '<label for="slmassetADD">ADD</label><br>'+ '<input type="number" min="0" id="slmassetADD" name="slmADD[]" class="form-control additionSLM">'+ '</div>'+ '<div class="col-md-2">'+ '<label for="slmassetEUL">EUL</label><br>'+ '<input type="number" min="0" id="slmassetEUL" name="slmEUL[]" class="form-control no_of_yearSLM">'+ '</div>'+ '</div>'+ '</div>'+ '<div class="col-md-12" style="padding-bottom: 10px;">'+ '<div class="row">'+ '<div class="col-md-2">'+ '<label for="slmassetBDA">BDA</label><br>'+ '<input type="number" readonly min="0" id="slmassetBDA" name="slmBDA[]" class="form-control bdaValueSLM">'+ '</div>'+ '<div class="col-md-2">'+ '<label for="slmassetDays">Day Used</label><br>'+ '<input type="number" readonly min="0" id="slmassetDays" name="slmDayUsed[]" class="form-control dayUsedSLM">'+ '</div>'+ '<div class="col-md-2">'+ '<label for="slmassetRateofDep">Rate of Dep.</label><br>'+ '<input type="number" readonly min="0" id="slmassetRateofDep" name="slmRate[]" class="form-control rateOfDepSLM">'+ '</div>'+ '<div class="col-md-2">'+ '<label for="slmassetDepAmount">Dep. Amount</label><br>'+ '<input type="number" readonly min="0" id="slmassetDepAmount" name="slmDepAmount[]" class="form-control depAmountSLM">'+ '</div>'+ '<div class="col-md-2">'+ '<label for="slmassetNetBlock">Net Block</label><br>'+ '<input type="number" readonly min="0" id="slmassetNetBlock" name="slmNetBlock[]" class="form-control netBlockSLM">'+ '</div>'+ '</div>'+ '</div>'+ '</div>'+ '</div>'+ '</div>'); $("#sch8_wdvslm").on("click", ".removeSch8wdvslm", function() { $(this).closest('.wdv_slm_container').remove(); }); } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="wdv_slm_container" style="border-style: dotted; border-radius: 10px; border-width: thin;"> <div class="form-group"> <label class="control-label" style="padding-left: 25px;">Select Method</label> <div class="input-group"> <div class="radio" style=" padding-left: 25px;"> <label><input type="radio" required id="choose_wdv" value="wdvslm_wdv" name="schedule8WDVSLM" class="choose_wdv">WDV</label> <label><input type="radio" required id="choose_slm" value="wdvslm_slm" name="schedule8WDVSLM" class="choose_slm">SLM</label> </div> </div> </div> <div class="wdv_option" style="display:none;"> <p style="padding-left: 10px;">AS PER WDV METHOD</p> <div class="schedule-container" style="border-style: dotted; border-radius: 10px; border-width: thin; border-top-left-radius: 5px; border-top-right-radius: 5px;"> <div class="col-md-12"> <div class="row"> <div class="col-md-2"> <label for="assetName">Name</label><br> <input type="text" id="assetName" name="wdvName[]" class="form-control"> </div> <div class="col-md-2"> <label for="assetDOP">DOP</label><br> <input type="date" id="assetDOP" name="wdvDOP[]" class="form-control date_of_purchase"> </div> <div class="col-md-2"> <label for="assetOC">OC</label><br> <input type="number" min="0" id="assetOC" name="wdvOC[]" class="form-control originalCost"> </div> <div class="col-md-2"> <label for="assetWDV">WDV</label><br> <input type="number" min="0" id="assetWDV" name="wdvWDV[]" class="form-control assWDV"> </div> <div class="col-md-2"> <label for="assetADD">ADD</label><br> <input type="number" min="0" id="assetADD" name="wdvADD[]" class="form-control addition"> </div> <div class="col-md-2"> <label for="assetEUL">EUL</label><br> <input type="number" min="0" id="assetEUL" name="wdvEUL[]" class="form-control no_of_year"> </div> </div> </div> <div class="col-md-12" style="padding-bottom: 10px;"> <div class="row"> <div class="col-md-2"> <label for="assetBDA">BDA</label><br> <input type="number" readonly min="0" id="assetBDA" name="wdvBDA[]" class="form-control bdaValue"> </div> <div class="col-md-2"> <label for="assetDays">Day Used</label><br> <input type="number" readonly min="0" id="assetDays" name="wdvDayUsed[]" class="form-control dayUsed"> </div> <div class="col-md-2"> <label for="assetRateofDep">Rate of Dep.</label><br> <input type="number" readonly min="0" id="assetRateofDep" name="wdvRate[]" class="form-control rateOfDep"> </div> <div class="col-md-2"> <label for="assetDepAmount">Dep. Amount</label><br> <input type="number" readonly min="0" id="assetDepAmount" name="wdvDepAmount[]" class="form-control depAmount"> </div> <div class="col-md-2"> <label for="assetNetBlock">Net Block</label><br> <input type="number" readonly min="0" id="assetNetBlock" name="wdvNetBlock[]" class="form-control netBlock"> </div> </div> </div> </div> </div> <div class="slm_option" style="display:none;"> <p style="padding-left: 10px;">AS PER SLM METHOD</p> <div class="schedule-container-slm" style="border-style: dotted; border-radius: 10px; border-width: thin;border-top-left-radius: 5px; border-top-right-radius: 5px;"> <div class="col-md-12"> <div class="row"> <div class="col-md-2"> <label for="slmassetName">Name</label><br> <input type="text" id="slmassetName" name="slmName[]" class="form-control"> </div> <div class="col-md-2"> <label for="slmassetDOP">DOP</label><br> <input type="date" id="slmassetDOP" name="slmDOP[]" class="form-control date_of_purchaseSLM"> </div> <div class="col-md-2"> <label for="slmassetOC">OC</label><br> <input type="number" min="0" id="slmassetOC" name="slmOC[]" class="form-control originalCostSLM"> </div> <div class="col-md-2"> <label for="slmassetWDV">WDV</label><br> <input type="number" min="0" id="slmassetWDV" name="slmWDV[]" class="form-control assWDVSLM"> </div> <div class="col-md-2"> <label for="slmassetADD">ADD</label><br> <input type="number" min="0" id="slmassetADD" name="slmADD[]" class="form-control additionSLM"> </div> <div class="col-md-2"> <label for="slmassetEUL">EUL</label><br> <input type="number" min="0" id="slmassetEUL" name="slmEUL[]" class="form-control no_of_yearSLM"> </div> </div> </div> <div class="col-md-12" style="padding-bottom: 10px;"> <div class="row"> <div class="col-md-2"> <label for="slmassetBDA">BDA</label><br> <input type="number" readonly min="0" id="slmassetBDA" name="slmBDA[]" class="form-control bdaValueSLM"> </div> <div class="col-md-2"> <label for="slmassetDays">Day Used</label><br> <input type="number" readonly min="0" id="slmassetDays" name="slmDayUsed[]" class="form-control dayUsedSLM"> </div> <div class="col-md-2"> <label for="slmassetRateofDep">Rate of Dep.</label><br> <input type="number" readonly min="0" id="slmassetRateofDep" name="slmRate[]" class="form-control rateOfDepSLM"> </div> <div class="col-md-2"> <label for="slmassetDepAmount">Dep. Amount</label><br> <input type="number" readonly min="0" id="slmassetDepAmount" name="slmDepAmount[]" class="form-control depAmountSLM"> </div> <div class="col-md-2"> <label for="slmassetNetBlock">Net Block</label><br> <input type="number" readonly min="0" id="slmassetNetBlock" name="slmNetBlock[]" class="form-control netBlockSLM"> </div> </div> </div> </div> </div> </div> <div id="sch8_wdvslm"></div> <button type="button" style=" margin-top: 10px;margin-bottom: 10px!important;" class="btn btn-primary btn-sm add-form-wdv_slm">Add More</button> 

也許我嘗試的方式也是完全錯誤的...

我不想使用id來追加數據，因為未設置擴展的最大值，並嘗試僅使用class name進行處理。

還有其他方法可以輕松地理解並且為函數控件保留1個類名

Answer 1

工作小提琴 http://jsfiddle.net/shree/xpvt214o/793020/

您可以定義變量並增加該變量，然后將該變量附加到名稱部分，以在廣播中保持唯一性，然后再進行如下綁定以進行分組。

 var index = 0; $(document).on('click', '.t1', function() { $(this).nextAll('.a:first').show(); $(this).nextAll('.b:first').hide(); }); $(document).on('click', '.t2', function() { $(this).nextAll('.b:first').show(); $(this).nextAll('.a:first').hide(); }); $(document).on('click', '.append-radio', addMoreRadio); function addMoreRadio() { index++ $('#append_both').append( '<input type="radio" name="test_data' + index + '" class="t1"> Test 1' + '<input type="radio" name="test_data' + index + '" class="t2">Test 2' + '<div class="a" style="display:none;">' + 'This is Test 1 Expanded' + '</div>' + '<div class="b" style="display:none;">' + 'This is Test 2 Expanded' + '</div>' ); } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="radio" name="test_data" class="t1"> Test 1 <input type="radio" name="test_data" class="t2">Test 2 <div class="a" style="display:none;"> This is Test 1 </div> <div class="b" style="display:none;"> This is Test 2 </div> <div id="append_both"></div> <button type="button" class="append-radio">Add More</button> 

注意：ID始終是唯一的，因此請使用類。 上例中，我將您的ID替換為類。

Answer 2

我已經更新了您的代碼，如果有幫助，請仔細研究

 $(document).on('click', '.t1', function () {
            if ($(this).parent().attr("id") == "append_both") {
                $(this).nextAll().eq(1).show();
                $(this).nextAll().eq(2).hide();
            }
            else {
                $('#t1_data').show();
                $('#t2_data').hide();
            }
        });

        $(document).on('click', '.t2', function () {
            if ($(this).parent().attr("id") == "append_both") {
                $(this).nextAll().eq(1).show();
                $(this).nextAll().eq(0).hide();
            }
            else {
                $('#t2_data').show();
                $('#t1_data').hide();
            }
        });

        $(document).on('click', '.append-radio', function () {

            var len = $('#append_both hr').length;
            addMoreRadio('test_data' + len);

        });

        function addMoreRadio(name) {
            $('#append_both').append(
              '<hr><input type="radio" name="' + name + '" class="t1"> Test 1' +
              '<input type="radio" name="' + name + '" class="t2">Test 2' +

              '<div class="t1_data" style="display:none;">' +
                'This is Test 1 Expanded' +
              '</div>' +

              '<div class="t2_data" style="display:none;">' +
                'This is Test 2 Expanded' +
              '</div>'
            );
        }