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

Question

问题描述 (Fiddle)：

我正在尝试从最初定义它们的事件之外的事件中清空/取消设置 this.rotated 和 this.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();
    });
});

Answer 1

你似乎几乎已经拥有它了。 当您执行$('.cats').fadeOut() 时，您又回到了猫的范围内，并且可以再次访问this.locked 和this.rotated，尽管您还需要在它们被锁定时再次减少计数。

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

此外，锁定和旋转的目的相同，您可以摆脱其中一个。