javascript - JS变量增量onclick

我有多个带按钮的盒子。我要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();
      });
});

最佳答案

试试下面的代码，它可能会帮助您：

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行为。