Question

问题描述（Fiddle）：

点击红色框将它们变成小猫（并以 i 的当前值提醒您）。点击淡入的大小猫将重置所有内容。

我完全不明白为什么alert(i)在第一次之后的每一次后续过程中多次（似乎逐渐升级）。同样，我不明白如何防止它发生。我最初的反应是它正在创建新的DOM元素，但我不知道当我只是更改img源时。

另外，如果我的代码很糟糕，请随时指出缺陷/清理它。我总是喜欢学习更优雅的方法。

代码：

cats = [
    "http://placekitten.com/g/121/121",
    "http://placekitten.com/g/122/122",
    "http://placekitten.com/g/123/123",
    "http://placekitten.com/g/124/124",
    "http://placekitten.com/g/125/125",
    "http://placekitten.com/g/126/126",
    "http://placekitten.com/g/127/127",
    "http://placekitten.com/g/128/128",
    "http://placekitten.com/g/129/129",
    "http://placekitten.com/g/130/130"
];
count = 0;

function getRandomCats() {
    var kitties = [];
    for(i = 0; i < 3; i++) {
        rand = Math.floor(Math.random() * (9 - 0 + 1)) + 0;
        kitties[i] = cats[rand];
    }
    meow(kitties);
}

function meow(kitties) {
    $('.cats').each(function(i) {
        $(this).mousedown(function() {
            alert(i); //debug
            $('div.front img', this).attr('src', kitties[i]);
            $(this).css({
                'transform': 'rotateY(180deg)',
                '-webkit-transform': 'rotateY(180deg)',
                'transition': 'transform 500ms ease-in-out',
                '-webkit-transition': '-webkit-transform 500ms ease-in-out'
            });
            this.flipped = 1, this.locked;
            if (this.flipped && !this.locked) {
                this.locked = 1;
                count++;
                if (count > 2) {
                    $('#newCat').fadeIn();
                }
            }
        })
    });
}

var clicked = 0;
$('#newCat').mousedown(function() {
    if (clicked == 0) {
        clicked = 1;
        $(this).stop(true).fadeOut();
        $('.cats').fadeOut(1000, function() {
            this.flipped = 0, this.locked = 0, count = 0;
            $(this).hide().css({
                'transform': 'rotateY(0deg)',
                '-webkit-transform': 'rotateY(0deg)'
            });
            getRandomCats();
            $(this).fadeIn();
        });
    }
    setTimeout(function(){clicked = 0;}, 1000);
});

getRandomCats();

Answer 1

mousedown语句不会覆盖先前绑定的函数。您可以通过

轻松解决此问题

$(this).unbind("mousedown");

在$(this).mousedown绑定语句之前。

P.S。因为你问过优雅：我建议你把你的代码分成更多的功能。如果缩进超过2个级别，代码将变得更难阅读。在某些时候，你缩进5级或更多级别。

对jQuery的.each（）的基本误解（带示例）

问题描述（Fiddle）：

代码：

1 个答案: