单击 3 次鼠标后如何启动操作答案

【问题标题】：How to initiate an action after 3 mouse clicks单击 3 次鼠标后如何启动操作
【发布时间】：2013-06-27 21:20:35
【问题描述】：

我是编写代码的新手，但我试图找出一个 div 在被单击 3 次后消失。我知道如何让它在点击一两次后消失，但我不确定如何在点击三下后消失。我写了一个while循环，应该在每次点击后迭代一次，但函数不会等待div被点击，而是继续并淡出div。

var threeClick = function() {
    var n = 0;
    while(n > 2) {
        $(document).ready(function() {
            $('div').click(function(){
                n++;
            });
        });
        $(document).ready(function(){
            $('div').fadeOut('slow');
        });
    }
}
threeClick();

【问题讨论】：

标签： javascript jquery click jquery-events

【解决方案1】：

这应该可行：

$(document).ready(function() {
    var n = 0;
    $('div').click(function() {
        n++;

        if(n == 3) {
           $('div').fadeOut('slow');
        }
    });
});

我想知道为什么您的while 循环在它坐下和旋转时不会阻止执行。 JavaScript 不是多线程的；有一个执行线程，我想while 会阻塞该线程。但除此之外，它不会真正起作用，因为在淡出 div 之前，您永远不会检查 n 的值。这就是为什么淡出几乎立即发生的原因。也不需要大量的$(document).ready(...) 电话；一个会做的。

我还建议使用.on：

$(document).ready(function() {
    var n = 0;
    $('div').on('click', function() {
        n++;

        if(n >= 3) {
           $('div').fadeOut('slow');
        }
    });
});

之所以有效，是因为已在匿名函数（传递给.ready）中定义的n 可用于传递给.on 或.click 的回调（闭包）。闭包在词法上绑定到定义它们的范围，这意味着在封闭范围内定义的任何内容都可用于闭包。因此，您的 n 的值将被更新并可供闭包使用。

【讨论】：

超级有帮助！感谢您填写详细信息，这确实帮助我了解了它们是如何协同工作的。

【解决方案2】：

你也可以试试这个

$(function(){
    $('#myDiv').on('click', function(){
        var clicks = $(this).data('clicks') || 0;
        $(this).data('clicks', clicks+1);
        if($(this).data('clicks') >=3 ) $(this).fadeOut();
    });
});

DEMO.

【讨论】：

感谢您展示另一个变体。你的看起来很紧凑，但我想我明白了。
欢迎您，是的，既然我们可以使用jQuery，那么为什么不使用它！ :-)

【解决方案3】：

$(document).ready(function() {
    var n = 0;
    $('div').click(function() {
        n++;
        if (n == 3) {
            $(this).fadeOut('slow');
        }
    });
});

见this

您不必重复$(document).ready。这是 DOM 准备好时调用的方法（来自 jQuery）。所以你的代码应该放在这个函数中；

【讨论】：

每天学习新东西。我只在 codeacademy 上做过简单的事情，从来没有遇到过它谈论使用 '$(document.ready)' 的地方。感谢您的意见。

【解决方案4】：

使用 jQuery 你可以做类似的事情

var counter=0;
$('div').on('click',function(){
           counter++; 
           if(counter==3)$('div').fadeOut();}
         );

【讨论】：

【解决方案5】：

您需要在函数外部创建保存计数的变量，否则每次调用函数时它都会重置。给 div 一个类名 - 这里我使用了 'divClassName'。

var numClicks = 0;

$(function() {

    $(document).on("click",".divClassName",function() {

        numClicks+=1;

        if (numClicks > 2) {

            $('div').fadeOut('slow');

        }   
    }

};

【讨论】：

感谢您提醒我们将计数保持在函数之外。

【解决方案6】：

var n
$(document).ready(function()
{
    n=0;
    $('div').click(function()
    {
        n++;
        if(n==3)
        {
            n=0;
            $('div').fadeOut('slow');
        }   
    });
}

【讨论】：

感谢您的回复，我喜欢您的简洁明了。