Как начать действие после трех щелчков мыши

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) доступна для обратного вызова (закрытия) передается .on или .click. Закрытия лексически связаны с областью, в которой они определены, а это означает, что для закрытия доступно все, что определено в закрытой области. Таким образом, ваше значение n будет обновлено и доступно для закрытия.

Answer 3

Вам нужно создать переменную, удерживающую счетчик вне функции, или она будет сбрасываться при каждом вызове функции. Дайте div имя класса - здесь я использовал 'divClassName'.

var numClicks = 0; 

$(function() { 

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

     numClicks+=1; 

     if (numClicks > 2) { 

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

     } 
    } 

}; 

Answer 4

С JQuery вы могли бы сделать что-то подобное

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

Answer 5

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

см this

Вам не придется повторять $(document).ready. Это метод (из jQuery), который вызывается при готовности DOM. Таким образом, ваш код должен войти в эту функцию;

Answer 6

Вы можете попробовать это тоже

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

DEMO.