Question

我真的很努力地解决这个问题，但一直遇到问题。它是一个游戏，老鼠弹出，你击中它们并获得积分。希望你能在这里看到它...... http://thetally.efinancialnews.com/tallyassets/wackamouse/index.html

我最终想要发生的事情是鼠标在随机延迟后弹出然后再次下降。一旦它们启动，它们就会变成“可点击的”。这是在它们启动时添加的类。

单击事件但不适用于已动态添加的类。我发现了一个应该回答这个问题的问题，但对我来说没有任何意义。

此外，延迟似乎越来越短。这是我的电脑缓存并加速吗？有没有办法使延迟时间一致。或者至少接近真正的秒数。

到目前为止，这是jQuery代码......

var score = 0;  

$(document).ready(function() {


function mouseShow(){

    $('.mouse').each(function() {
        var $mouse = $(this);
        var min = 7000, max = 13000;
        var delay = Math.floor(Math.random() * (max - min) + min);
        setTimeout(function(){

            $mouse.animate({
                'background-position-x': '0',
                'background-position-y': '0'
            }, 300, function() {
                $mouse.addClass('clickable');
                mouseHide();
            });

        },  delay);

    });

}

function mouseHide(){

    $('.mouse').each(function() {
        var $mouse = $(this);
        var min = 4000, max = 6000;
        var delay = Math.floor(Math.random() * (max - min) + min);
        setTimeout(function(){
            $mouse.removeClass('clickable');
            $mouse.animate({
                'background-position-x': '0',
                'background-position-y': '40px'
            }, 300, function() {
                mouseShow();
            });

        },  delay);

    });

}

mouseShow();

    $('.clickable').click(function() {


        $('.score p').remove();
        score += 1;
        $('.score').append( "<p>"+score+"</p>" );
        console.log(score);

    });




});

Answer 1

您需要使用附加到鼠标的不变的祖先元素的委托事件处理程序（例如.mice div），例如：

$('.mice').on('click', '.clickable', function() {

它通过监听冒泡到目标元素的事件来工作，然后将jQuery选择器应用于bubble-chain中的元素，然后应用函数导致事件的任何元素。最终结果是.clickable元素只需要在事件时匹配。这对于许多项目只需要一个处理程序，而且开销很低（因为每秒只能点击几次，性能差异可以忽略不计）

Re：延迟，用随机数很难看出。尝试使用固定的持续时间来测试性能，然后切换到随机。

针对＆＃39; Whack-A-Mole＃39的多个jQuery问题;风格游戏

1 个答案: