动态添加具有不同id的输入字段

Question

我要在我的页面中添加 - 动态 - 这样的输入范围：

<div id="input_div">
<input type="button" value="-"  onclick="minus()">
<input name="order" type="number" min="0" max="30" size="10" range="1" value="1" id="count1">
<input type="button" value="+" onclick="plus()">
</div>
<div id="wrapper"></div>
<a href="#" id="add-inputs">ADD</a>

我要添加和删除该输入的数量。

例如，第一个输入有id = count1，如果我点击“加号”按钮，它必须增加它的值。但是如果我有id=count2的另一个输入并且我点击“加号”按钮，它必须用id=count2增加第二个输入的值，它不应该用{{1}更改第一个输入}}。 然后我不知道如何添加和删除输入。 所以有两个问题：

• 如何使用不同的ID添加许多输入（带有id=count1的div中保存的输入）;
• 如何处理第一个问题，增加和减少（使用按钮加号和减号）当前输入的值及其自动生成的ID（与其他人不同）...以及如何删除它。

谢谢

Answer 1

编辑：我已添加输入类型编号...我希望这就是您想要的...

这里有一个例子：http://jsfiddle.net/ryGqZ/

$('#addScnt').click(function() {
                $('<p><label for="p_scnts"><input type="text" id="p_scnt_' + i +'" size="20" name="p_scnt_' + i +'" value="" placeholder="Input Value" /></label> <a href="#" id="remScnt">Remove</a></p>').appendTo(scntDiv);

我不知道为什么要添加两个按钮：“+”和“ - ”。我通过输入类型编号和 safari 获得此信息：

Answer 2

您需要使用java脚本或JQuery创建您的html。 例如，以下代码在input_div容器中创建10个输入元素：

    $(document).ready(function () {
        for (i = 1; i <= 10; i++) {
            $("#input_div").append('<input  id="count' + i.toString() + '" name="order" type="number" min="0" max="30" size="10" range="1" value="1">');
        }
    });

Answer 3

您需要将一个属性添加到减号＆amp;加上像“btnId”这样的输入。并使用此属性访问它的编号。见代码：

$(document).ready(function () {
    for (i = 1; i <= 10; i++) {
        $("#input_div").append('<input btnId="count' + i.toString() + '" type="button" value="-"  onclick="minus()">');
        $("#input_div").append('<input  id="count' + i.toString() + '" name="order" type="number" min="0" max="30" size="10" range="1" value="1">');
    }
});

function minus() {
    var btnName = $(this).attr("btnId");
    var btn = $("#" + btnName);
    ...
}