Javascript Jquery增量数，限制为5

我正在用onclick添加文本字段。我想做的是把盒子的数量限制在5个左右

我还需要增加用作ID的数字

我的代码：

jQuery('#add_slider_image').click(function() {

        var i = 0
        var plus = ++i;


        jQuery('.form-table').append("<tr><td><input type'text' value='' name='slider[]' /><input type='button' name='sliderbut' value='Upload' id='button' rel='"+ plus +"' /></td><tr>");

        var count = jQuery.('#button').attr('rel');

        if(count=5){
         alert('Limit reached');
        }
    })

jQuery（'#添加_滑块_图像'）。单击（函数（）{
变量i=0
var plus=++i；
jQuery（'.form table'）。追加（“”）；
var count=jQuery（“#按钮”）.attr（'rel'）；
如果（计数=5）{
警报（“达到限制”）；
}
})

---

谢谢

我想这样应该行得通：

jQuery('#add_slider_image').click(function() {

    var count = jQuery("input[name='sliderbut']").length;

    if (count < 5){
        jQuery('.form-table').append("<tr><td><input type='text' value='' name='slider[]' /><input type='button' name='sliderbut' value='Upload' /></td><tr>");
    }
})

jQuery（'#添加_滑块_图像'）。单击（函数（）{
var count=jQuery（“输入[name='sliderbut']”）；
如果（计数小于5）{
jQuery（'.form table'）。追加（“”）；
}
})

---

这里有一点简化的提琴：

我想这样应该可以：

jQuery('#add_slider_image').click(function() {

    var count = jQuery("input[name='sliderbut']").length;

    if (count < 5){
        jQuery('.form-table').append("<tr><td><input type='text' value='' name='slider[]' /><input type='button' name='sliderbut' value='Upload' /></td><tr>");
    }
})

jQuery（'#添加_滑块_图像'）。单击（函数（）{
var count=jQuery（“输入[name='sliderbut']”）；
如果（计数小于5）{
jQuery（'.form table'）。追加（“”）；
}
})

有点简化的小提琴：

这部分意味着

plus

将始终为零且

i==1

，因此

rel

属性始终为

0

var count = jQuery.('#button').attr('rel');

您正在使用一个ID选择器。并且ID每页只能存在一次。当您使用ID选择器时，只会得到第一个匹配的元素，它显然不是您想要的元素，因为您想要最后一个元素中的数字

…但这并不重要，因为现在您只需告诉

count

等于5，

警报将始终执行。您要查找的是比较运算符
==

要做到这一点，最简单的方法是放弃计数和诸如此类的内容，只需在插入之前检查元素是否已经过多：

jQuery('#add_slider_image').click(function() {

    if($('.form-table .myRow').length < 5) {
        jQuery('.form-table').append('<tr class="myRow"><td><input type="text" name="slider[]" /><input type="button" name="sliderbut" value="Upload" class="button" /></td><tr>');
    }
});

jQuery（'#添加_滑块_图像'）。单击（函数（）{
如果（$（'.form table.myRow'）。长度小于5）{
jQuery（'.form table'）.append（''）；
}
});

请注意，我添加了
myRow
类来帮助识别追加的行，并将
id=“button”
更改为
class=“button”

这部分意味着
plus
将始终为零且
i==1
，因此
rel
属性始终为
0

var count = jQuery.('#button').attr('rel');

您正在使用一个ID选择器。并且ID每页只能存在一次。当您使用ID选择器时，只会得到第一个匹配的元素，它显然不是您想要的元素，因为您想要最后一个元素中的数字

…但这并不重要，因为现在您只需告诉
count
等于5，
警报将始终执行。您要查找的是比较运算符
==

要做到这一点，最简单的方法是放弃计数和诸如此类的内容，只需在插入之前检查元素是否已经过多：

jQuery('#add_slider_image').click(function() {

    if($('.form-table .myRow').length < 5) {
        jQuery('.form-table').append('<tr class="myRow"><td><input type="text" name="slider[]" /><input type="button" name="sliderbut" value="Upload" class="button" /></td><tr>');
    }
});

jQuery（'#添加_滑块_图像'）。单击（函数（）{
如果（$（'.form table.myRow'）。长度小于5）{
jQuery（'.form table'）.append（''）；
}
});

请注意，我添加了
myRow
类来帮助识别追加的行，并将
id=“button”
更改为
class=“button”
当您尝试将“count”与必须使用==的数字5进行比较时

count=5
会将count设置为5，如果使用
count==5
则会将变量与数字5进行比较，并根据变量的值返回true或false

另外，我认为您可以通过使用length轻松地计算按钮的数量，例如：
$（'.button'）。length
应该返回类（而不是ID）“button”的元素数。
当您尝试将“count”与数字5进行比较时，您必须使用==代替

count=5
会将count设置为5，如果使用
count==5
则会将变量与数字5进行比较，并根据变量的值返回true或false

另外，我认为您可以通过使用length轻松地计算按钮的数量，例如：
$（“.button”）。length
应该返回类（而不是ID）“button”的元素数。
试试这个

jQuery('#add_slider_image').click(function() {
    var myHTML = "";
    var current_count = jQuery('.form-table tr').length();
    if (current_count >= 5) return;
    for (var i = current_count; i <= 5; i++) {
        myHTML += "<tr><td><input type'text' value='' name='slider[]' /><input type='button' name='sliderbut' value='Upload' id='button" + plus + "' rel='" + plus + "' /></td><tr>";
    }
    //touch DOM once
    jQuery('.form-table').append(myHTML);
});

jQuery（'#添加_滑块_图像'）。单击（函数（）{
var myHTML=“”；
var current_count=jQuery（'.form table tr'）.length（）；
如果（当前计数>=5）返回；
对于（var i=当前计数；i请尝试此方法

jQuery('#add_slider_image').click(function() {
    var myHTML = "";
    var current_count = jQuery('.form-table tr').length();
    if (current_count >= 5) return;
    for (var i = current_count; i <= 5; i++) {
        myHTML += "<tr><td><input type'text' value='' name='slider[]' /><input type='button' name='sliderbut' value='Upload' id='button" + plus + "' rel='" + plus + "' /></td><tr>";
    }
    //touch DOM once
    jQuery('.form-table').append(myHTML);
});

jQuery（'#添加_滑块_图像'）。单击（函数（）{
var myHTML=“”；
var current_count=jQuery（'.form table tr'）.length（）；
如果（当前计数>=5）返回；
对于（var i=current_count；i您必须将计数器变量置于事件处理程序之外，否则每次都将从零开始

您应该将添加元素的代码放在if语句中，以便显示消息或添加元素

当您已经有了值时，从刚才添加的按钮读取值是没有意义的。此外，id应该是唯一的，因此您不会从最后一个按钮获取值，而是从第一个按钮获取值

比较运算符是
=
，如果使用
=
，则会为变量指定一个值，因此该条件将始终为真

$(document).ready(function(){

  var sliderCount = 0;

  jQuery('#add_slider_image').click(function() {

    if (sliderCount == 5) {
      alert('Limit reached');
    } else {
       sliderCount++;
       jQuery('.form-table').append('<tr><td><input type="text" value="" name="slider[]" /><input type="button" name="sliderbut" value="Upload" rel="'+ sliderCount +'" /></td><tr>');
    }

  });

});

$（文档）.ready（函数（）{
var sliderCount=0；
jQuery（“#添加_滑块_图像”）。单击（函数（）{
如果（滑块计数==5）{
警报（“达到限制”）；
}否则{
滑块计数++；
jQuery（'.form table'）.append（''）；
}
});
});
必须将计数器变量置于事件处理程序之外，否则每次都将从零开始

您应该将添加元素的代码放在if语句中，以便显示消息或添加元素

当你已经有了值时，从你刚刚添加的按钮中读取值是没有意义的。此外，id应该是唯一的，这样你就不会重复