gpt4 book ai didi

javascript - Jquery:将值传递给数组格式字段中的下一个字段

转载 作者:行者123 更新时间:2023-11-30 16:33:27 25 4
gpt4 key购买 nike

我有一个div

<div class="input-daterange input-group" id="datepicker">
<input type="text" class="input-sm form-control" name="booking[depart][]" />
<span class="input-group-addon">to</span>
<input type="text" class="input-sm form-control" name="booking[return][]" />
</div>

然后我让用户点击更多按钮,上面的 div 被克隆,并附加在它下面。

我的问题是:

每次重复元素时,如何让 booking[depart][n] 的值等于 booking[return][n-1]。 (其中 n 只是表示字段数组中输入索引的数字)。

编辑

预期的 html(如果我更改克隆的 div 的 id,但集中于名称属性的答案将是可预测的)

<div class="input-daterange input-group" id="datepicker">
<input type="text" class="input-sm form-control" name="booking[depart][]" />
<span class="input-group-addon">to</span>
<input type="text" class="input-sm form-control" name="booking[return][]" />
</div>
<div class="input-daterange input-group" id="datepicker0">
<input type="text" class="input-sm form-control" name="booking[depart][]" />
<span class="input-group-addon">to</span>
<input type="text" class="input-sm form-control" name="booking[return][]" />
</div>
<div class="input-daterange input-group" id="datepicker1">
<input type="text" class="input-sm form-control" name="booking[depart][]" />
<span class="input-group-addon">to</span>
<input type="text" class="input-sm form-control" name="booking[return][]" />
</div>

最佳答案

.clone()将复制值,因此我们必须手动更新它们。

我的方法适用于这个单一用例,但我建议使用一些数据绑定(bind) MVC 库将数据与 DOM 分开。如果您想验证用户输入,使用 jQuery 会变得非常困难。

请考虑以下代码段:

// Wait for DOMReady.
$(function() {
var lastId = null,
count = 0,

// Put everything in to variables for optimal usage.
$target = $('body'),
$btn = $('#btn');

$btn.on('click', function() {

// Clone the object.
var $cloneEl = (lastId !== null) ? $('#' + lastId).clone() : $('#datepicker').clone();
$returnEl = $cloneEl.find('input[name="booking[return][]"]'),
$departEl = $cloneEl.find('input[name="booking[depart][]"]');

if ($returnEl.val() !== '') {
$departEl.val($returnEl.val());
$returnEl.val('');
} else {
$departEl.val('');
}

lastId = $cloneEl.attr('id') + count;

// Update the "id" attribute and insert in to <body>
$cloneEl.attr('id', lastId).appendTo($target);

count++;
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="btn">Add new input group</button>
<div class="input-daterange input-group" id="datepicker">
<input type="text" class="input-sm form-control" name="booking[depart][]" />
<span class="input-group-addon">to</span>
<input type="text" class="input-sm form-control" name="booking[return][]" />
</div>

关于javascript - Jquery:将值传递给数组格式字段中的下一个字段,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33003471/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com