4

コードを書くのは初めてですが、3回クリックした後にdivが消えるようにしようとしています。1 回か 2 回のクリックで非表示にする方法は知っていますが、3 回のクリックで非表示にする方法がわかりません。クリックするたびに 1 回反復する 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();
4

6 に答える 6

3 
var n
$(document).ready(function()
{
    n=0;
    $('div').click(function()
    {
        n++;
        if(n==3)
        {
            n=0;
            $('div').fadeOut('slow');
        }   
    });
}
于 2013-06-30T17:22:56.783 に答える
3

これはうまくいくはずです：

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

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

while座って回転している間、ループが実行をブロックしないのはなぜだろうか。JavaScript はマルチスレッドではありません。単一の実行スレッドがあり、whileそのスレッドがブロックされると思います。しかし、それを除けばn、div をフェードアウトする前に の値をチェックしていないため、実際には機能しません。これが、フェードアウトがほぼ即座に起こる理由です。何度も$(document).ready(...)呼び出す必要もありません。1つは行います。

次の使用もお勧めし.onます。

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

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

これnが機能するのは、無名関数 ( に渡される) で定義された がまたは.readyに渡されるコールバック (クロージャー) で使用できるためです。クロージャーは、それらが定義されているスコープに字句的にバインドされています。つまり、囲まれたスコープで定義されているものはすべてクロージャーで使用できます。したがって、の値が更新され、クロージャーで利用できるようになります。.on.clickn

于 2013-06-30T17:23:10.150 に答える
3 
$(document).ready(function() {
    var n = 0;
    $('div').click(function() {
        n++;
        if (n == 3) {
            $(this).fadeOut('slow');
        }
    });
});

これを見る

繰り返す必要はありません$(document).ready。これは、DOM の準備ができたときに呼び出される (jQuery からの) メソッドです。したがって、コードはこの関数に入れる必要があります。

于 2013-06-30T17:24:31.247 に答える
2

あなたもこれを試すかもしれません

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

デモ。

于 2013-06-30T17:28:06.043 に答える
0

関数の外でカウントを保持する変数を作成する必要があります。そうしないと、関数が呼び出されるたびにリセットされます。div にクラス名を付けます。ここでは「divClassName」を使用しています。

var numClicks = 0;

$(function() {

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

        numClicks+=1;

        if (numClicks > 2) {

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

        }   
    }

};
于 2013-06-30T17:23:50.013 に答える
0

jQueryを使用すると、そのようなことができます

var counter=0;
$('div').on('click',function(){
           counter++; 
           if(counter==3)$('div').fadeOut();}
         );
于 2013-06-30T17:24:07.340 に答える