javascript - 在jquery中正确减去变量

Question

这实际上是我写过的前几个函数......它有效，但我想知道是否有另一种更有效的方法将变量 i 限制为不低于 0 且不高于 5，而不是在每个函数中添加额外的 if 语句.click() .....然后代码非常少，所以也许这是限制变量的最有效方法？！

var i=0;
$(".add").click(function(event){
    if(i < 5) {
        var container = $('div');
        container.append($("<p class='blabla'>blablabla</p>"));
        if(i < 5){i++}
    }
});

$(".delete").click(function(event){
    if(i < 5, i > 0){i--}
    $("div p:last-of-type").remove();
});

Answer 1

您不需要第二次签入if (i<5) i++;（如果是 5 个或更多，则不会输入该块i）。

此外，您可以只写if(i > 0) i--;，因为是否i超过 5 并不重要。

小提琴。

Answer 2

在每个…中添加额外的 if 语句.click()……</p>

它们是必要的，很好。但是，您可以稍微缩短它们。

….append($("<p class='" + name + " select'>" + name + "</p>"));

该append方法也接受纯 HTML 字符串，您不需要将它们包装在$()调用中。

if(i < 5) {
    if(i < 5){i++}
}

内在if条件是多余的。两者之间没有任何变化i，因此您无需再次检查。

if(i < 5, i > 0){i--}

在这里，您实际上使用了逗号运算符，它只会产生正确的操作数才能在效果中生效。您可能想要一个&&AND 运算符，但您根本不应该检查i<5- 它无论如何都不会超出范围，并且您不想复制上边界。

所以使用

var i=0;
$(".add").click(function(event){
    if (i < 5) {
        var container = $('div');
        container.append("<p class='blabla'>blablabla</p>");
        i++;
    }
});
$(".delete").click(function(event){
    if (i > 0) {
        $("div p:last-of-type").remove();
        i--;
    }
});

另一种没有计数器变量的方法i是每次计算现有元素：

$(".add").click(function(event){
    var container = $('div');
    if (container.find("p").length < 5) {
        container.append("<p class='blabla'>blablabla</p>");
    }
});
$(".delete").click(function(event){
    $("div p:last-of-type").remove(); // if nothing is found nothing is removed anyway
});

Answer 3

在您的示例中，您实际上不需要变量i，因为您可以简单地计算元素的数量。

$(".add").click(function () {
    if ($('div').children('p').length < 5) {
        $('div').append('<p>item</p>');
    }
});

或者

$(".add").click(function () {
    if ($('div p').length < 5) {
        $('div').append('<p>item</p>');
    }
});

而且您的删除功能根本不需要检查项目的数量，因为选择器不会找到要删除的任何内容。

$(".delete").click(function () {
    $('div p:last-of-type').remove();
});

Answer 4

而不是计数，使用你想要控制的最大值，让 jQuery 做剩下的事情：

http://jsfiddle.net/3D69b/

<a class='add'>Add</a><br/>
<a class='delete'>Del</a>
<div class='add'>AppendToMe</div>

然后：

var gv_nMax = 5;

$(".add").click(function(event){
    if($("div p").length < gv_nMax) 
    $('div').append($("<p class='blabla'>blablabla</p>"))
});
$(".delete").click(function(event){ $("div p:last-of-type").remove(); });