从其范围/功能之外重置“this”的值

时间:2014-03-02 03:45:58

标签: javascript jquery variables scope this

问题描述(Fiddle):

我试图从最初定义的事件之外的事件中清空/取消设置this.rotatedthis.locked的值。我需要这些'锁定'变量对每只小猫都是唯一的,以防止后续的.mousedown()事件。

最终目标是能够不断点击三只小猫,让第四只大猫淡入,点击第四只猫,然后重置一切。

我对 this 的把握最多;足以在大多数情况下使用它,但非常缺乏对其范围和实用性的透彻理解。说实话,我甚至不确定我的头衔是否准确,但我想不出用另一种方式来表达它。

代码:

var count = 0;
$('.cats').each(function(i){
  $(this).mousedown(function() {
    $(this).css({
      'transform': 'rotate(45deg)',
      '-webkit-transform': 'rotate(45deg)'
    });
    this.rotated = 1, this.locked;
    if (this.rotated && !this.locked) {
      this.locked = 1;
      count++;
      if (count > 2) {
        $('#newCat').fadeIn();
      }
    }
  });
});

$('#newCat').mousedown(function() {
    $(this).fadeOut();
    $('.cats').fadeOut(function() {
        $(this).css({
            'transform': 'rotate(0deg)',
            '-webkit-transform': 'rotate(0deg)'
        })
        .fadeIn();
    });
});

1 个答案:

答案 0 :(得分:2)

你似乎已经差不多了。 当你执行$('.cats').fadeOut()时,你又回到猫的范围内,this.lockedthis.rotated可以再次访问,但你也需要在锁定时再次减少计数。

工作小提琴: http://jsfiddle.net/SB57D/4/

此外,锁定和旋转都是为了同一目的,你可以摆脱其中一个。