Question

您好我使用以下简单的jquery脚本来追加输入。来源http://muiomuio.com/web-design/add-remove-items-with-jquery

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Add and Remove - jQuery tutorial</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
    var i = $('input').size() + 1;

    $('a.add').click(function() {
    $('<p><input type="text" value="input ' + i + '" name="input_field'+ i +'" /></p>').animate({ opacity: "show" }, "slow").appendTo('#inputs');
        i++;
    });

    $('a.remove').click(function() {
            if(i > 2) {
        $('input:last').animate({opacity:"hide"}, "slow").remove();
    i--;
    }
    });

    $('a.reset').click(function() {
    while(i > 2) {
        $('input:last').remove();
        i--;
    }
    });
});
</script>
</head>
<body>
<h1>Add / remove text fields from webform</h1>

<a href="#" class="add"><img src="add.png" width="24" height="24" alt="add" title="add input" /></a> 
<a href="#" class="remove"><img src="remove.png" width="24" height="24" alt="remove input" /></a>
<a href="#" class="reset"><img src="reset.png" width="24" height="24" alt="reset" /></a>

<div id="inputs">
<p>
<input type="text" value="input 1" name="input_field1">
</p>
</div>
</div>
</body>
</html>

我知道想要添加更多输入字段

所以我添加这个html

<div id="outputs">
<p>
<input type="text" value="output 1" name="output_field1">
</p>

我怎样才能实现

var i = $('input').size() + 1;

将单独用于每个输入部分吗？

EDITED：完整的脚本如下。复制和粘贴将为您提供我的完整克隆。问题仍然存在

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Add and Remove - jQuery tutorial</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>

<script type="text/javascript">

$(function() {

    var i = $('input').size() + 1;

    $('a.add').click(function() {

        $('<p><input type="text" value="input ' + i + '" name="input_field'+ i +'" /></p>').animate({ opacity: "show" }, "slow").appendTo('#inputs');
        i++;
    });

    $('a.remove').click(function() {

    if(i > 2) {
        $('input:last').animate({opacity:"hide"}, "slow").remove();
        i--;

    }

    });

    $('a.reset').click(function() {

    while(i > 2) {
        $('input:last').remove();
        i--;
    }

    });




        $('a.add_o').click(function() {

        $('<p><input type="text" value="output ' + i + '" name="input_field'+ i +'" /></p>').animate({ opacity: "show" }, "slow").appendTo('#outputs');
        i++;
    });

    $('a.remove_o').click(function() {

    if(i > 2) {
        $('input:last').animate({opacity:"hide"}, "slow").remove();
        i--;

    }

    });

    $('a.reset_o').click(function() {

    while(i > 2) {
        $('input:last').remove();
        i--;
    }

    });





});

</script>
<style rel="stylesheet" type="text/css">

h1 { font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;}

.hide {visibility:hidden;}

img {border:none;}

input { 
    width:500px; 
    height:20px;
    padding:10px;
    background:#f7f7f7;
    border:1px solid #f0f0f0; 
    color:#333; 
    font-size:20px; 
    text-align:center; 
    line-height:120px;
    margin:0;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
}

#inputs {
    width:520px;
    padding:0px 20px;
    border:1px solid #f0f0f0;
    -moz-border-radius:20px;
    -webkit-border-radius:20px;
    }

</style>
</head>

<body>

<h1>Add / remove text fields from webform</h1>

<a href="#" class="add"><img src="http://muiomuio.com/tutorials/jquery/add-remove/add.png" width="24" height="24" alt="add" title="add input" /></a> 
<a href="#" class="remove"><img src="http://muiomuio.com/tutorials/jquery/add-remove/remove.png" width="24" height="24" alt="remove input" /></a>
<a href="#" class="reset"><img src="http://muiomuio.com/tutorials/jquery/add-remove/reset.png" width="24" height="24" alt="reset" /></a>

<div id="inputs">
<p>
<input type="text" value="input 1" name="input_field1">
</p>
</div>


<a href="#" class="add_o"><img src="http://muiomuio.com/tutorials/jquery/add-remove/add.png" width="24" height="24" alt="add" title="add input" /></a> 
<a href="#" class="remove_o"><img src="http://muiomuio.com/tutorials/jquery/add-remove/remove.png" width="24" height="24" alt="remove input" /></a>
<a href="#" class="reset_o"><img src="http://muiomuio.com/tutorials/jquery/add-remove/reset.png" width="24" height="24" alt="reset" /></a>

<div id="outputs">
<p>
<input type="text" value="output 1" name="output_field1">
</p>

</div>

</body>

</html>

Answer 1

我认为你可以做到以下几点：

$('input').each(function () {
$(this).size() + 1;

// ... rest of the code

});

Answer 2

全局定义您的变量。

即：

<script type="text/javascript">
   var i = 0;
    $(function() {
        i = $('input').size() + 1;
        $('a.add').click(function() {
            $('<p><input type="text" value="input ' + i + '" name="input_field' + i + '" /></p>').animate({
                opacity: "show"
            }, "slow").appendTo('#inputs');
            i++;
        });
        $('a.remove').click(function() {
            if (i > 2) {
                $('input:last').animate({
                    opacity: "hide"
                }, "slow").remove();
                i--;
            }
        });
        $('a.reset').click(function() {
            while (i > 2) {
                $('input:last').remove();
                i--;
            }
        });
    });
</script>

Answer 3

        $(function() {
    var i = $('input').size() + 1;

    $('a.add').click(function() {
    $('<p><input type="text" value="input ' + i + '" name="input_field'+ i +'" /></p>').animate({ opacity: "show" }, "slow").appendTo('#inputs');//first field added
    $('<p><input type="text" value="output ' + i + '" name="output_field'+ i +'" /></p>').animate({ opacity: "show" }, "slow").appendTo('#inputs');// Second field added
        i=i+2;//increment by two fields;
    });

    $('a.remove').click(function() {
            if(i > 2) {
        $('input:last').animate({opacity:"hide"}, "slow").remove();//second field removed
        $('input:last').animate({opacity:"hide"}, "slow").remove();//first field removed
    i=i-2;//decrement by 2 fields
    }
    });

    $('a.reset').click(function() {
    while(i > 2) {
        $('input:last').remove();
        i--;
    }
    });
});

Answer 4

我想我做了你想做的事。您唯一需要做的就是让您的代码更加一致。而不是只询问size()一次，你可以在每次需要时问它。这将是您的i。我想这将是你的完整javascript。如您所见，我明确添加了'#inputs input'问题，因此您可以计算正确的事情。我认为.size()方法有点欺骗，因为它实际上是一种计数方法。计算匹配的对象数量。

$(function() 
{
    $('a.add').click(function() 
    {
        var i = $('#inputs input').size() + 1;
        var newItem = newTextField('input',i);
        appendItem(newItem, '#inputs');
    });

    $('a.remove').click(function() 
    {
        var i = $('#inputs input').size();

        // can't remove the last
        if(i > 1)
            removeItem('#inputs input:last'); // be sure that the input is inside your #inputs
    });

    $('a.reset').click(function() 
    {
        while($('#inputs input').size() > 1) 
        {
            $('#inputs input:last').remove();
        }
    });

    $('a.add_o').click(function() 
    {
        var i = $('#outputs input').size() + 1;
        var newItem = newTextField('output',i);
        appendItem(newItem, '#outputs');
    });

    $('a.remove_o').click(function() 
    {
        var i = $('#outputs input').size();

        // can't remove the last
        if(i > 1) 
            removeItem('#outputs input:last'); // be sure that the output is inside your #outputs

    });

    $('a.reset_o').click(function() 
    {
        while($('#outputs input').size() > 1) 
        {
            $('#outputs input:last').remove();
        }
    });

    /*
     * @param type: a string of input of output
     * @param i: the number to add to
     */
    function newTextField(type, i)
    {
        return '<p><input type="text" value="' + type + ' ' + i + '" name="input_field"' + i + '" /></p>';
    }

    /*
     * append the item animated to the $(selector)
     * @param item: the item:string to append
     * @param selector: the selector:string to append to
     */
    function appendItem(item, selector)
    {
        $(item).animate({ opacity: 'show' }, 'slow').appendTo(selector);
    }

    /*
     * remove an item animated
     * @param item: the item:string to remove
     */
    function removeItem(item)
    {
        $(item).animate({opacity:"hide"}, "slow").remove();
    }
});

Jquery为2个不同的输入节添加输入

4 个答案: