我有一个静态表单,如下所示:
<form id="engraving_selection">
<h3>Engraving Options</h3>
<input type="radio" name="engraving" value="Engrave-Different" id="engrave_different" checked="checked">Unique engraving for each item<br />
<input type="radio" name="engraving" value="Engrave-Same" id="engrave_same">The engraving would the same on each item<br />
<input type="radio" name="engraving" value="No-Engraving" id="no_engraving">I would not like engraving on this item<br />
</form>
<form id="engraving_options">
<h4>Engraving Text</h4>
<div id="items">
<div class="item">
<br />
<label>Engraving Line 1: </label>
<input type="text" class="engraving-input" name="line1-trophies" id="line1-tag0">
<br />
<label>Engraving Line 2: </label>
<input type="text" class="engraving-input" name="line2-trophies" id="line2-tag0">
<br />
<label>Engraving Line 3: </label>
<input type="text" class="engraving-input" name="line3-trophies" id="line3-tag0">
<br />
</div>
</div>
</form>
我需要根据页面上"quantity_wanted"字段中的编号"克隆"项目。
我想用jquery来做这件事。
我有现有的jquery:
//define template
var formTemplate = $('#engaving_options #items').clone();
var itemTemplate = $('#items .item:first').clone();
$("#quantity_wanted").bind('keyup oninput mouseup', function () {
//get the new value
var currentValue = $("#quantity_wanted").val();
var inputCode = '';
switch ($('input[name=engraving]:checked').val()) {
case 'Engrave-Different':
alert ('value ='+currentValue);
for (i=1; i<currentValue; i++) {
alert ('this is how many');
//loop through each input
var item = itemTemplate.clone().find(':input').each(function(){
//set id to store the updated section number
var newId = this.id + currentValue;
//update for label
$(this).prev().attr('for', newId);
//update id
this.id = newId;
}).end()
//inject new section
.appendTo('#items');
return false;
};
break;
}
});
正如你所看到的,有一个无线电选择器,当它被选中时,输入需要与用户当前输入的数量相匹配。
按照代码的原样,它会适当地克隆表单输入,但如果用户添加到数量中或从数量中删除,则会创建一个克隆。
即:如果用户添加1,则应该有两个表单(现有代码就是这样做的),但如果用户删除1,则会添加第三个表单(而不是删除克隆的最后一个表单)。
这是如何最好地完成的?
有一些东西。。
除了正在使用的内容之外,您还可以在quantity_wanted
输入字段上添加onfocus和onblur等事件。
var inputCode
未使用,因此您可以将其用作var inputCode = $('input[name=engraving]:checked').val()
,检查它是否为空,如果为空,只需删除已克隆的元素即可。。
为了进行删除,您可以尝试在div或某个标记中添加元素,例如,如下所示。。
<div class="item" id="initialitems">
<br />
<label>Engraving Line 1: </label>
<input type="text" class="engraving-input" name="line1-trophies" id="line1-tag0">
<br />
<label>Engraving Line 2: </label>
<input type="text" class="engraving-input" name="line2-trophies" id="line2-tag0">
<br />
<label>Engraving Line 3: </label>
<input type="text" class="engraving-input" name="line3-trophies" id="line3-tag0">
<br />
</div>
//items cloned when user input 1
<div class="item" id="cloneditems1">
<br />
<label>Engraving Line 1: </label>
<input type="text" class="engraving-input" name="line1-trophies" id="line1-tag0">
<br />
<label>Engraving Line 2: </label>
<input type="text" class="engraving-input" name="line2-trophies" id="line2-tag0">
<br />
<label>Engraving Line 3: </label>
<input type="text" class="engraving-input" name="line3-trophies" id="line3-tag0">
<br />
</div>
then cloneditems2, cloneditems3 and so on..
因此,假设用户输入3,但后来选择2,那么您可以简单地调用jQuery("#cloneditems3").remove()
,或者您可以删除所有现有的cloneditem,并根据用户的输入再次克隆项目。这样一来,事情就会变得更简单、更容易,也更有条理。
为了跟踪您之前克隆的元素数量,您可以使用全局javascript变量var cloneditemcount = 0 (initially)
并根据用户选择进行更新,还可以使用和比较来了解您之前克隆了多少个项目。
希望这能有所帮助。