你是如何使jQuery需要第二次点击才能开始下一个事件，如果第一个使第二个事件成为真的话？

Question

I'm trying to write a code that will be able to flick between images on a website and I'm using JavaScript and jQuery. I want it to move to the next of the three images when you click the button. I've done this using .hide(); and .show(); to do this if a variable is true and when you .click() the button.

My problem is that it works for the first if statement, however the outcome of the first if statement makes the second one true, and so that runs as well, this then causes the third if statement to run, even though they are each within different .click() events. I was wondering if there was any way of stopping the code running before you click the button again, or if there is a much easier way of coding something that changes between a few images.

Any help would be greatly appreciated, I'm pretty new to this and it is all a bit confusing!

Here's my code:

$(document).ready(function(){
                        $("#Image1").show();                     
                        var visbile1 = true;
                        $("#Image2").hide();
                        var visible2 = false;
                        $("#Image3").hide();
                        var visible3 = false;

                        $("#rightButton").click(function(){     
                                if (visible1 = true) {
                                $("#Image2").show();
                                $("#Image1").hide();
                                var visible3 = false;
                                var visible2 = true;
                                var visible1 = false;
                                };
                        });
                        $("#rightButton").click(function(event){
                                if (visible2 = true) {
                                $("#Image3").show();
                                $("#Image2").hide();
                                var visible3 = true;
                                var visible2 = false;
                                var visible1 = false;
                                };
                        }); 
                        $("#rightButton").click(function(){     
                                if (visible3 = true) {
                                $("#Image1").show();
                                $("#Image3").hide();
                                var visible3 = false;
                                var visible2 = false;
                                var visible1 = true;
                                };
                        });
                });             

Answer 1

Only bind 1 event with your 3 if and then the problem is solved :

$("#rightButton").click(function(){     
    if (visible1 = true) {
        $("#Image2").show();
        $("#Image1").hide();
        visible3 = false;
        visible2 = true;
        visible1 = false;
    }
    else if (visible2 = true) {
        $("#Image3").show();
        $("#Image2").hide();
        visible3 = true;
        visible2 = false;
        visible1 = false;
    }    
    else if (visible3 = true) {
        $("#Image1").show();
        $("#Image3").hide();
        visible3 = false;
        visible2 = false;
        visible1 = true;
    };
});

"or if there is a much easier way of coding something that changes between a few images."

I won't do the code for you, but yes there is :)

Answer 2

If it's confusing to you I would stick with a straightforward answer like the one Karl gave. Studying that code should help you to learn and understand jQuery. There are ways to make the code shorter as well. Hopefully this example will be useful for you too.

$(document).ready(function(){
  var counter = 0;
  var mod = 1;
  $("#Image1").show();                     
  $("#Image2").hide();
  $("#Image3").hide();

  $("#rightButton").click(function(){ 
       $("#Image"+mod).hide();                     
       counter++;
       mod = (counter % 3) + 1;
       $("#Image"+mod).show();
  });
});