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 jの動作を変更することができます。