Question

需要帮助！如何在每次点击“添加”按钮时添加一个？

每次点击时，这个数字都会增加。

它从0开始，在我点击之后它会加1变为1，然后变为2等等。

HTML：

<div id="add_form">

    <div class="form-field">

        <div class="field">

            <div class="no">0</div>

        </div>

    </div>

</div>

<a href="#" id="add_field" class="btn btn-default">Add </a>
<p><br /></p>

JQuery的：

 $(document).ready(function() {

    var MaxInputs       = 8;
    var InputsWrapper   = $("#add_form");
    var AddButton       = $("#add_field");

    var x = InputsWrapper.length;
    var FieldCount=1;

    $(AddButton).click(function (e) {

        if(x <= MaxInputs) {

            FieldCount++;

            $(InputsWrapper).append('<div class="field"><div class="no">1</div></div>');
            x++;

        }

        return false;

    });

});

我的JQuery非常糟糕，需要你们的帮助。

此外，这里是jsfiddle链接。

http://jsfiddle.net/fzs77/

非常感谢您的帮助。

Answer 1

您有1硬编码，因此无法更改。这样做：

$(InputsWrapper).append('<div class="field"><div class="no">' + x + '</div></div>');

使用工作演示检查此JSFiddle。

Answer 2

你必须输出保存你追加的html中的数字的变量。同时将FieldCount变量的increscent移动到append函数调用之下，以呈现正确的结果。像这样：

$(AddButton).click(function (e) {

    if(x <= MaxInputs) {

        $(InputsWrapper).append('<div class="field"><div class="no">' + FieldCount + '</div></div>');
        x++;
        FieldCount++;

    }

    return false;

});

Answer 3

试试这个jsfiddle：
http://jsfiddle.net/fzs77/7/

<div id="add_form">


<div class="form-field">

        <div class="field">

            <div class="no">0</div>

        </div>

    </div>

</div>

<a href="#" id="add_field" class="btn btn-default">Add </a>
<p><br /></p>

JS档案

$(document).ready(function() {

    var MaxInputs       = 8;
    var InputsWrapper   = $("#add_form");
    var AddButton       = $("#add_field");

    var x = InputsWrapper.length;
    var FieldCount=0;

    $(AddButton).click(function (e) {

        if(x <= MaxInputs) {

            FieldCount++;



   $(InputsWrapper).append('<div class="field"><div class="no">' + FieldCount + '</div></div>');



        }

        return false;

    });

});

Answer 4

如果您想在同一行上增加它，请尝试此操作。

http://jsfiddle.net/sdMCH/

$(document).ready(function() {   
    $('#add_field').click(function (e) {
            var x=$(".no");            
            x[0].innerHTML = (parseInt(x[0].innerHTML,10)+1);
        }
    );
});

每次单击“添加”按钮添加一个

4 个答案: