JS可變增量onclick

Question

我有一個按鈕的多個框。我想要onclick選擇按鈕變量增量。我不想超過6個，所以我禁用了其他按鈕。

Fiddle Demo Here

如果我刪除任何元素。刪除的應該繼續下一次點擊。請參閱演示以獲得更好的理解。

var ct = ["1","2","3","4","5","6"]; 
var i = -1; 

$('.goal1').each(function(index){ 
    $(this).on('click', function(e){ 
    i = i+1; 
    i = i % ct.length; 

    $(this).parents('li').addClass('selected'); 
    $(this).fadeOut('50', function(){ 
     $(this).parents('li').find('.goal2').fadeIn('50'); 
    }); 
    $(this).parents('li').find('.counter').text(ct[i]); 
    if($('li.selected').length > 5){ 
      $('.goal1').prop('disabled', true); 
    } 
    e.preventDefault(); 
    }); 
}); 

$('.goal2').each(function(index){ 
     $(this).on('click', function(e){ 
     i = i-1; 
     i = i % ct.length; 
     $(this).parents('li').removeClass('selected'); 
     $(this).fadeOut('50',function(){ 
      $(this).parents('li').find('.goal1').fadeIn('50'); 
     }); 
     $(this).parents('li').find('.counter').text(''); 
       $('.goal1').prop('disabled', false); 
     e.preventDefault(); 
     }); 
}); 

Answer 1

試試下面的代碼它可以幫助你：

var ct = ["1","2","3","4","5","6"]; 
var i = -1; 
var j = []; 

$('.goal1').each(function(index){ 
     $(this).on('click', function(e){ 
     i = i+1; 
     i = i % ct.length; 

     $(this).parents('li').addClass('selected'); 
     $(this).fadeOut('50', function(){ 
      $(this).parents('li').find('.goal2').fadeIn('50'); 
     }); 
     if(j.length > 0){ 
      $(this).parents('li').find('.counter').text(j.pop()); 
     } 
     else 
      $(this).parents('li').find('.counter').text(ct[i]); 
     if($('li.selected').length > 5){ 
       $('.goal1').prop('disabled', true); 
     } 
     e.preventDefault(); 
     }); 
}); 

$('.goal2').each(function(index){ 
     $(this).on('click', function(e){ 
     i = i-1; 
     i = i % ct.length; 
     $(this).parents('li').removeClass('selected'); 
     $(this).fadeOut('50',function(){ 
      $(this).parents('li').find('.goal1').fadeIn('50'); 
     }); 
     j.push($(this).parents('li').find('.counter').text()); 
     $(this).parents('li').find('.counter').text(''); 
       $('.goal1').prop('disabled', false); 
     if($('li.selected').length == 0){ 
       j = []; 
     } 
     e.preventDefault(); 
     }); 
}); 

您可以更改VARĴ行爲根據自己的需要。