Javascript 如何在3次鼠标单击后启动操作

我对编写代码还不熟悉，但我正试图找出一个div在被点击三次后消失的方法。我知道如何让它消失后，一个或两个点击，但我不知道如何做后，三。我编写了一个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();

这应该起作用：

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

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

我想知道为什么你的

while

循环在运行和旋转时不阻止执行。JavaScript不是多线程的；只有一个执行线程，我可以想象

而
会阻塞该线程。但除此之外，它不会真正起作用，因为在淡出div之前，您从未检查
n
的值。这就是淡出几乎立即发生的原因。也不需要大量的
$（document）.ready（…）
调用；一个就行了

我还建议使用：

这是因为在匿名函数中定义的
n
（传递给
.ready
）可用于传递给
.on
或
的回调（闭包）。单击
。闭包在词汇上绑定到定义它们的范围，这意味着在封闭范围内定义的任何内容都可用于闭包。因此，您的
n
的值将被更新并可用于闭包。
您需要创建保存函数外部计数的变量，否则每次调用函数时它都会重置。给div一个类名——这里我使用了“divClassName”

var numClicks = 0;

$(function() {

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

        numClicks+=1;

        if (numClicks > 2) {

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

        }   
    }

};

使用jQuery，您可以做类似的事情

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

看

您不必重复
$（document）.ready
。这是一个在DOM就绪时调用的方法（来自jQuery）。所以你的代码应该放在这个函数中
 你也可以试试这个

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

非常有用！感谢您填写的详细信息，它真的帮助我了解了这一切是如何协同工作的。感谢您的回复，我喜欢您的简单和干净。每天学习新的东西。我只在codeacademy上做过简单的事情，从来没有遇到过它谈到使用“$（document.ready）”。感谢您的输入。感谢您展示另一个变体。您的看起来非常紧凑，但我想我理解它。欢迎您，是的，因为我们可以使用
jQuery
那么为什么不使用它呢！：-）谢谢你提醒我不要让计数出现在函数之外。
var counter=0;
$('div').on('click',function(){
           counter++; 
           if(counter==3)$('div').fadeOut();}
         );

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

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