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

Try ниже код может помочь вам:

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(); 
     }); 
}); 

Вы можете изменить вар J поведение в соответствии с вашими потребностями.