Question

I have 3 “span”s

<span class="input1" style="display:block;"><span class="round"></span></span>
<span class="input2" style="display:none;"><span class="round"></span></span>
<span class="input3" style="display:none;"><span class="round"></span></span>

And this is the script:

$(document).ready(function() {
    act = 1;
    next = act+1;
    });

$(".round").click(function (){
         $('.input'+act).hide();
         $('.input'+next).show();
         act = next;
    });

Push “.round” for the first time -> “.input1” – hide & “.input2” – show
If i want to push “.round” for the second time -> nothing happened. (This is the problem)

How to hide “.input2” and show “.input3”?
Thanks for help and sorry for my english!

Answer 1

Solution

Because next is always equal to 2.

The second time, act == 2 and next == 2 so you hide then show the same element.

Try that:

$('.round').click(function (){
    $('.input' + act).hide();
    $('.input' + next).show();
    act = next++;
});

---

A bit of explanation

According to MDN:

++ is a increment operator.

This operator increments (adds one to) its operand and returns a
value. If used postfix, with operator after operand (for example,
x++), then it returns the value before incrementing. If used prefix
with operator before operand (for example, ++x), then it returns the
value after incrementing.