0

我正在尝试编写一个能够在网站上的图像之间轻弹的代码，并且我正在使用 JavaScript 和 jQuery。当您单击按钮时，我希望它移动到三个图像中的下一个。我已经使用.hide();并.show();执行此操作if，变量为真，当您.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;
                                };
                        });
                });
4

2 回答 2

2

如果问题得到解决，则仅将 1 事件与您的 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;
    };
});

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

我不会为你做代码，但是有:)

于 2013-10-25T17:27:29.633 回答
0

如果这让你感到困惑，我会坚持一个简单的答案，就像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();
  });
});
于 2013-10-25T17:31:53.783 回答