Question

这实际上是我写过的前几个函数......它有效，但是我想知道是否有另一种更有效的方法将变量i限制为0以下的任何值，而不是5以上的值，而不是每个.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++;中进行第二次检查（如果i为5或更多，则不会输入该块。）

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

Fiddle.

Answer 2

在每个.click() ...
中制作额外的if语句

他们很有必要。但是，你可以稍微缩短它们。

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

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

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

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

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

这里你实际上使用comma operator，它只产生正确的操作数才能在效果中生效。你可能想要一个&& AND operator，但你根本不应该检查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(); });

在jquery中正确地减去变量

4 个答案: