javascript - 单击 3 次鼠标后如何启动操作

Question

我是编写代码的新手，但我试图弄清楚在被点击三下后让一个 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();

Answer 1

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

Answer 2

这应该有效：

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

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

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

我还建议使用.on：

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

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

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

Answer 3

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

看到这个

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

Answer 4

你也可以试试这个

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

演示。

Answer 5

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

var numClicks = 0;

$(function() {

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

        numClicks+=1;

        if (numClicks > 2) {

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

        }   
    }

};

Answer 6

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

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