小贝子编程

使用 JQuery 单击单选按钮后追加 DIV 仅使用父数据



我想创建一个input-radio，用户可以在其中选择他们的选项并在该选项中填充数据，并展开另一个input-radio来填充其他数据。但不幸的是，每当无线电扩展时，所有扩展数据都只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 个类名

Working Fiddlehttp://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 替换为类。

我已经更新了您的代码，如果对您有帮助，请查看此代码

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

相关内容

最新更新


热门标签：

javascript python java c# php android html jquery c++ css ios sql mysql arrays asp.net json python-3.x ruby-on-rails .net sql-server django objective-c excel regex ruby linux ajax iphone xml vba spring asp.net-mvc database wordpress string postgresql wpf windows xcode bash git oracle list vb.net multithreading eclipse algorithm macos powershell visual-studio image forms numpy scala function api selenium