javascript - 如果第一个事件使第二个事件为真，如何使 jQuery 需要第二次单击才能启动下一个事件？

Question

我正在尝试编写一个能够在网站上的图像之间切换的代码，并且我正在使用 JavaScript 和 jQuery。我希望当您单击按钮时它移至三个图像中的下一个。我已经使用 .hide(); 和 .show(); 来完成此操作 if 变量为 true 并且当您 .click() 按钮。

我的问题是它适用于第一个 if 语句，但是第一个 if 语句的结果使第二个 if 语句为真，因此也可以运行，这会导致第三个 if 语句运行，即使它们是每个都在不同的 .click() 事件中。我想知道在再次单击按钮之前是否有任何方法可以停止代码运行，或者是否有更简单的方法来编码在几个图像之间发生变化的内容。

任何帮助将不胜感激，我对此很陌生，而且有点令人困惑!

这是我的代码:

$(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

仅将 1 个事件与 3 个 if 绑定(bind)，然后问题就解决了:

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

“或者是否有一种更简单的方法来编码在几张图像之间发生变化的内容。”

我不会为你编写代码，但是是的:)