0

我正在处理 jquery 代码以将动态字段添加到我的字段列表中，我有几个 Web 链接，但其中大多数使用 live 命令无法按预期工作，我在 jquery UI 选项卡中执行此操作

我尝试了这段代码，因为它运行良好，但有几个问题：

function trimNums(stringToTrim)
        {
            return stringToTrim.replace(/\d+$/,"");
        }         
        function dupForm(divId, divClass, btnAdd, btnRm)
        {
        //alert(divId+'   '+divClass);
            var num     = $(divClass).length;
            var newNum  = new Number(num + 1);
            var i;

            var newElem = $('#' + divId + num).clone().attr('id', divId + newNum);

            for (i=0; i < newElem.children().length; i++)
            {
                var attrId = trimNums(newElem.children(':eq('+i+')').attr('id'));
                var attrName = trimNums(newElem.children(':eq('+i+')').attr('name'));

                newElem.children(':eq('+i+')').attr('id', attrId + newNum).attr('name', attrName + newNum);
            }
            $('#' + divId + num).after(newElem);
            $('#' + btnRm).attr('disabled',false);

            //if (newNum == 15)
                //$('#' + btnAdd).attr('disabled','disabled');
        }

        function rmForm(divId, divClass, btnAdd, btnRm)
        {
            var num = $(divClass).length;

            $('#' + divId + num).remove();
            //$('#' + btnAdd).attr('disabled','');

            if (num-1 == 1) {
                $('#' + btnRm).attr('disabled','disabled');
                $('#' + btnAdd).attr('disabled',false); 
            }
        }
<div>
        <input type="button" id="btnAdd" class="btn" onclick="dupForm('input', '.clonedInput', 'btnAdd', 'btnDel');" value="Add" />
        <input type="button" id="btnDel" class="btn" onclick="rmForm('input', '.clonedInput', 'btnAdd', 'btnDel');" value="Remove" /><br /><br />
    </div>
            <div id="input1" style="margin-bottom:4px;" class="clonedInput">
                <input type="text" class="input-block-level-inputfields" name="product1" id="product1" placeholder="Product Details" />
                <input type="text" class="input-block-level-inputfields" name="price1" id="price1" style="width:50px;" placeholder="Price" />
            </div>

代码问题：

  1. 如果我在一个字段中输入值并单击添加我不想要的值，它也会克隆值。
  2. 在价格字段中，我想输入价格值，它应该在 div 框中立即计算出来，我稍后会定义。如果我点击删除，金额应立即扣除

谢谢

4

1 回答 1

2

1）克隆后，将值设置为空：

var newElem = $('#' + divId + num).clone().attr('id', divId + newNum).val('');

或者

var newElem = $('#' + divId + num).clone().attr('id', divId + newNum);
newElem.val('').attr('value', '');

但是，克隆不应复制该值，如 jQuery API 中所述：

表单元素的动态状态（例如，输入到输入中的用户数据，以及文本区域或用户对选择所做的选择）不会复制到克隆的元素。

至于（2），您没有提供足够的信息。请发布总结价格字段的代码和“div”框 HTML。

如果您还没有它，首先，添加一个具有如下 ID 的 div 框：

<div id="answer">0</div>

接下来，添加以下 JavaScript 代码：

function recalculateTotal() {
    var total = 0;
    $('input[placeholder=price]').each(function() {
        total += parseFloat($(this).val());
    };
    $('#answer').text(total);
}
$(function() {
    $('body').on('keyup', 'input[placeholder=price]', recalculateTotal);
});

并将其添加到函数的最后一行rmForm：

recalculateTotal();
于 2013-08-05T03:57:13.800 回答