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会阻止该线程。但除此之外它不会真正起作用，因为你在淡出div之前从未检查n的值。这就是为什么淡出几乎立即发生的原因。也不需要多次$(document).ready(...)次呼叫;一个人会这样做。

我还建议使用.on：

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

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

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

Answer 3

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

请参阅this

您不必重复$(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();
    });
});

DEMO.

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();}
         );

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

6 个答案: