在事件更改时更新变量jquery

时间:2021-03-30 19:39:29

I am creating a interactive experience using jQuery. I am trying to make it so my character can go into multiple rooms.

我正在使用jQuery创建交互式体验。我想做到这一点,所以我的角色可以进入多个房间。

$(document).keydown(function(e) {
    switch (e.which) {
        case 39:
            $("#barry").attr("src", "img/characters/BarryBallRight.png")
            $("#barry").stop().animate({
                left: 1021
            }, 1250, function() {
                position = $(this).position();
                getCurrentPos(position);
                if (barryPosX > $("#canvas").width()) {
                    if (state == 0) {
                        state = 1
                        changeBackground(state);
                        // reset barry
                        $(this).css({
                            'left': '-100px'
                        });
                        $(this).stop().animate({
                            left: '+=150px'
                        })

                    };
                    if (state == 1) {
                        state = 2;
                        changeBackground(state);
                        // reset barry
                        $(this).css({
                            'left': '-100px'
                        });
                        $(this).stop().animate({
                            left: '+=150px'
                        })
                    };
                };
            })

My problem as you can see is that the last state that runs overwrites the previous one, meaning that the changeBacktround() function will change the background of the most recent state that is set i.e 2

我可以看到的问题是,运行的最后一个状态会覆盖前一个状态,这意味着changeBacktround()函数将改变设置的最新状态的背景,即2

I know there is some logic I am missing.

我知道我缺少一些逻辑。

Note that the getCurrentPos() function just retrieves the current $("#barry") position on screen. The changeBackground() function is switch statement that takes the current state and changes the screen background accordingly.

请注意,getCurrentPos()函数只是检索屏幕上的当前$(“#barry”)位置。 changeBackground()函数是switch语句,它接受当前状态并相应地更改屏幕背景。

Thanks in advance.

提前致谢。

1 个解决方案

#1


2  

if (state == 0) {
   state = 1
   changeBackground(state);
   // reset barry
   $(this).css({
   'left': '-100px'
   });
  $(this).stop().animate({
  left: '+=150px'
    })

   } else if (state == 1) {
      state = 2;
      changeBackground(state);
      // reset barry
      $(this).css({
       'left': '-100px'
      });
      $(this).stop().animate({
       left: '+=150px'
        })
      };

As far as I understand you need to use else if. Right now hes always going into the 2nd condition if the state starts with 0. With else if its going either into the condition 'state == 0' or into 'state == 1' condition but not into both

据我所知,你需要使用其他if。现在他总是进入第二个条件,如果状态从0开始。如果它进入条件'state == 0'或'state == 1'条件但不进入两个状态

#1


2  

if (state == 0) {
   state = 1
   changeBackground(state);
   // reset barry
   $(this).css({
   'left': '-100px'
   });
  $(this).stop().animate({
  left: '+=150px'
    })

   } else if (state == 1) {
      state = 2;
      changeBackground(state);
      // reset barry
      $(this).css({
       'left': '-100px'
      });
      $(this).stop().animate({
       left: '+=150px'
        })
      };

As far as I understand you need to use else if. Right now hes always going into the 2nd condition if the state starts with 0. With else if its going either into the condition 'state == 0' or into 'state == 1' condition but not into both

据我所知,你需要使用其他if。现在他总是进入第二个条件,如果状态从0开始。如果它进入条件'state == 0'或'state == 1'条件但不进入两个状态