javascript - 无法获得 while 循环工作(崩溃页面)

Question

所以，我知道我肯定做错了什么。我是 Javascript 和 jQuery 的新手，所以这可能是很明显的事情，所以请原谅我的无知，我正在尽力而为。

我制作了一个包含起点、终点和墙壁的基本迷宫，让您一头雾水。全部完成后，墙壁将变得不可见以增加难度。迷宫在这个 JSFiddle 中按预期工作:http://jsfiddle.net/V2wxT/2/

工作:

$(document).ready(function (){
    $('.start').click(function() {
        var x = 1;


    $('#myTable tr td.wall').on('mouseenter',function(){
        $('body').css( "background-color", "yellow");
        x=x+1;
        alert("You hit a wall!");
    })
    $('#myTable tr td.finish').on('mouseenter',function(){
         x=x+1;
        alert("You did it!");
    })
    $('#myTable tr td.wall').on('mouseleave',function(){
        $('body').css( "background-color", "white");
    })
  });
});

我遇到的问题是，一旦你撞墙，我希望你必须再次点击开始，这样它会取消“完成”警报，以及当你撞墙时的警报。

我尝试做的是添加一个 while 循环来表示“只要 x=1，就允许完成警报和撞墙发生” 一旦撞墙或走完迷宫，它会增加 +1 X。

我的 WHILE 循环不工作:

$(document).ready(function (){
    $('.start').click(function() {
    var x = 1;

    while(x=1){

    $('#myTable tr td.wall').on('mouseenter',function(){
        $('body').css( "background-color", "yellow");
        x=x+1;
        alert("You hit a wall!");
    })
    $('#myTable tr td.finish').on('mouseenter',function(){
         x=x+1;
        alert("You did it!");
    })
    $('#myTable tr td.wall').on('mouseleave',function(){
        $('body').css( "background-color", "white");
    })

    } 

   });
});

这是带有 while 循环的 JSFiddle，它似乎使页面崩溃:http://jsfiddle.net/V2wxT/3/

任何帮助将不胜感激，尤其是因为我认为这是我忽略的简单问题。

Answer 1

正如其他人所指出的，while循环在这里没有真正的帮助。当您在其中不断重新绑定(bind)事件处理程序时，它会导致您的问题。您可以在这个 Fiddle 中看到一种有效的方法。它所做的一切都跟踪了你试图用 x 做的事情。使用名为 working 的变量，根据您开始、结束或撞墙的时间设置和取消设置。

$(document).ready(function (){
    var working = false;
    $('.start').click(function() {
        working = true;
    });
    $('#myTable tr td.wall').on('mouseenter',function(){
        if (working) {
            $('body').css( "background-color", "yellow");
            alert("You hit a wall!");
        }
        working = false;
    });
    $('#myTable tr td.finish').on('mouseenter',function(){
        if (working) {
            alert("You did it!");
        }
        working = false;
    });
    $('#myTable tr td.wall').on('mouseleave',function(){
        $('body').css( "background-color", "white");
    });
});