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

仅将3事件与3绑定，然后解决问题：

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

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

我不会为你做代码，但有的是：）

Answer 2

如果它让你感到困惑，我会坚持像Karl给出的直截了当的回答。研究该代码应该有助于您学习和理解jQuery。有一些方法可以缩短代码。希望这个例子也对你有用。

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

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

2 个答案: