如何實現與計數器jQuery的簡單的錯誤

Question

我有一些代碼添加字段，但目前它增加了無限的箱子。我怎麼能限制它只能是10最大理想我想它，當我嘗試加入更多的後10

http://jsfiddle.net/spadez/9sX6X/13/

var container = $('.copies'), 
    value_src = $('#current'); 

$('.copy_form') 
    .on('click', '.add', function(){ 
     var value = value_src.val(); 
     var html = '<div class="line">' + 
      '<input class="accepted" type="text" value="' + value + '" />' + 
      '<input type="button" value="X" class="remove" />' + 
     '</div>'; 

     $(html).appendTo(container); 
     value_src.val(''); 
    }) 
    .on('click', '.remove', function(){ 
     $(this).parents('.line').remove(); 
    }); 

我知道代碼提醒：

alert("Only 10 allowed"); 

我在了個去的代碼：

var i = 0 // Set counter 
i++ // Increment counter 
if(i > 10) { 
    alert("Only 10 allowed"); 
} 
else { 
    // code to be executed 
} 

這是我的第一個劇本之一，我想知道，如果我可以通過正確的方式獲得幫助來實現此目的，因爲我上面嘗試的代碼打破了我當前的工作代碼。

Answer 1

，而不是你的代碼中嵌入「幻數」（參見：What is a magic number, and why is it bad?），定義了一個maxFields變量和整個保持計數，每一個又一個嘗試加入時間覈對該值。

這可以讓你的代碼變得更加便攜，並且可以被其他人重用，或者當你想要20個字段時，你可以用另一個用例。

它也讀取更像英語（當前字段小於最大字段），這導致自我文檔。

http://jsfiddle.net/9sX6X/21/

var container = $('.copies'), 
    value_src = $('#current'), 
    maxFields = 10, 
    currentFields = 1; 

$('.copy_form').on('click', '.add', function() { 
    if (currentFields < maxFields) { 
     var value = value_src.val(); 
     var html = '<div class="line">' + 
      '<input class="accepted" type="text" value="' + value + '" />' + 
      '<input type="button" value="X" class="remove" />' + 
      '</div>'; 

     $(html).appendTo(container); 
     value_src.val(''); 
     currentFields++; 
    } else { 
     alert("You tried to add a field when there are already " + maxFields); 
    } 
}) 
    .on('click', '.remove', function() { 
    $(this).parents('.line').remove(); 
    currentFields--; 
}); 

維基百科：

術語幻數也指 使用數字的不好的編程習慣直接在源代碼中沒有任何解釋。在大多數情況下，這使得程序難以閱讀，理解和維護。 儘管大多數指南對數字0和1都有例外，但在代碼中將所有其他數字定義爲 常數是個好主意。

Answer 2

在您單擊處理程序，檢查是否與類線元素的數量小於10

if ($('.line').length < 10) { 
    //execute code 
}else{ 
    alert('Only 10 allowed'); 
    return false; 
} 

Fiddle

Answer 3

這裏我使用的jQuery的。長度方法。

var container = $('.copies'), 
value_src = $('#current'); 

$('.copy_form') 
.on('click', '.add', function(){ 
    if ($('.accepted').length < 10) 
    { 
    var value = value_src.val(); 
    var html = '<div class="line">' + 
     '<input class="accepted" type="text" value="' + value + '" />' + 
     '<input type="button" value="X" class="remove" />' + 
    '</div>'; 

    $(html).appendTo(container); 
    value_src.val(''); 
    } 
    else 
    { 
     alert("Only 10 allowed"); 
    } 
}) 
.on('click', '.remove', function(){ 
    $(this).parents('.line').remove(); 
}); 

Fiddle