JS variable increment onclick

Question

I have multiple boxes with a button. I want onclick select button variable increment. I don't want to be selected more than 6 so I have disabled other buttons.

Fiddle Demo Here

If I remove any element. The removed one should continue on next click. Please see demo for better understanding.

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

Instead of incrementing/decrementing i you should keep the state of selections like: ['1': true, '2': true, '3': false, '4': false] then when you click on un-selected box you assign this box a first number which has false value (e.g using data-selection-number) and change the state of selections. When you remove selection by clicking on selected box you again change a state of selections and clear data-selection-number. — Ignacy Kasperowicz
– Ignacy Kasperowicz, Commented Jan 19, 2017 at 11:50

Jayesh Patel · Accepted Answer · 2017-01-19 13:08:04Z

Try below code it might help you:

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

You can change var j behavior as per your need.

Hi Jayesh, It's good but would it be possible to re-arrange numbers. E.g. If I select 1-6 and remove 1. The number should become 1-5 and which I select that should be number 6.

Collectives™ on Stack Overflow

JS variable increment onclick

1 Answer 1

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Related