繁体   English   中英

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

[英]Add one every time click ADD button

需要帮忙! 每次单击“添加”按钮时如何添加一个?

每次单击,数字都会增加。

它从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/

非常感谢您的帮助。

您有1硬编码,因此无法更改。 像这样做:

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

通过工作示例检查此JSFiddle

您必须删除包含要添加的html内的数字的变量。 还将FieldCount变量的新月形移动到append函数调用下方,以呈现正确的结果。 像这样:

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

    if(x <= MaxInputs) {

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

    }

    return false;

});

试试这个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;

    });

});

如果要在同一行上增加它,请尝试此操作。

http://jsfiddle.net/sdMCH/

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

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM