javascript - 需要使用 jquery 根据数字输入更新表单输入

Question

我有一个如下所示的静态表单:

<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，则添加第三个表单(而不是删除最后克隆的表单)。

如何最好地实现这一点？

Answer 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() 或者您可以删除所有现有的克隆项目并克隆根据用户的输入再次显示项目。这样事情就会变得更简单、更容易，也更有条理。

要跟踪您之前克隆的元素数量，您可以使用全局 javascript 变量，例如 var cloneditemcount = 0(初始) 并根据用户选择进行更新，并使用和比较了解您之前克隆了多少项目。

希望这有帮助。