2015-09-28 4 views
0

Я хочу показать всплывающее окно через каждые 4 клика по различным ссылкам jQuery.как запустить событие после определенных кликов по ссылке jquery

У меня есть разные ссылки, которые идут на их относительные страницы после обновления страницы. Как я могу показать всплывающее окно после каждых 4 ссылок?

<a href="home.html">Home</a> 
<a href="about.html">About</a> 
<a href="portfolio.html">Portfolio</a> 
<a href="Contact.html">Contact</a> 
<a href="faq.html">FAQ</a> 

Вот мой скрипт, который я использую

(function() { 
    var count = 0; 
    $(a).click(function() { 
     count += 1; 
     if (count == 4) { 
      // popup code 
     } 
    }); 
})(); 
+0

чек я обновил свой вопрос. – fanatic

+0

вы должны сохранить счетчик в месте, где вы можете снова получить его после загрузки страницы. Используйте локальное хранилище. – guradio

ответ

2

Вы можете использовать $.data() для хранения количества кликов для этой конкретной линии связи следующим образом:

$(document).ready(function(){ 
 
    
 
    $("a").click(function(e){ 
 
    e.preventDefault(); 
 
     if($(this).data("numberOfClicks")){ 
 
     var currentClicks = $(this).data("numberOfClicks"); 
 
     currentClicks++; 
 
     $(this).data("numberOfClicks",currentClicks); 
 

 
     if(currentClicks % 4 == 0) 
 
      alert($(this).text()+" clicked "+currentClicks+" times...!"); 
 
     } 
 
    else 
 
     { 
 
     $(this).data("numberOfClicks",1); 
 
     } 
 
    }); 
 
    });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<a href="home.html">Home</a> 
 
<a href="about.html">About</a> 
 
<a href="portfolio.html">Portfolio</a> 
 
<a href="Contact.html">Contact</a> 
 
<a href="faq.html">FAQ</a>

+0

Спасибо Vijay за ответ, но я хочу запускать события после каждых 4 ссылок, (несколько из 4, например, после 4, после 8, после 12 и т. Д.) – fanatic

+0

это сделано ... :)! – vijayP

+0

Привет, что такое numberOfClicks на вашем коде? – fanatic

2

Попробуйте следующее: у вас есть возможность подсчета данных для каждая ссылка и вызов e.preventDefault(), если щелчок не является четвертым щелчком.

$(function(){ 
 
    $('a').click(function(e){ 
 
     var count = parseInt($(this).data('count')) || 0; 
 
     count++; 
 
     if(count%4!=0) 
 
      e.preventDefault(); 
 
      
 
     $(this).data('count',count); 
 
    });  
 

 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 
 
<a href="home.html">Home</a> 
 
<a href="about.html">About</a> 
 
<a href="portfolio.html">Portfolio</a> 
 
<a href="Contact.html">Contact</a> 
 
<a href="faq.html">FAQ</a>

0
<html> 
<head> 
    <script src="https://code.jquery.com/jquery-1.9.1.min.js"></script> 
    <script> 
     $(document).ready(function() { 

      var $count = 0; 

      $('a').click(function() { 

       $count += 1; 

       if ($count == 4) { 

        alert(" 4 clicks on different links"); 

        //define the event function here 
        // bind the event with the html elements 
       } 
      }); 



     }); 



    </script> 
</head> 
<body> 
    <a id="home"href="#">Home</a> 
    <a href="#">About</a> 
    <a href="#">Portfolio</a> 
    <a href="#">Contact</a> 
    <a href="#">FAQ</a> 

</body> 
</html> 

enter code here