第二次和第三次点击时发生的事件

Question

I'm currently in the process of making a website for my band, and one idea I had was that on a specific page, you would see a picture of each band member, and when you hover over it with your mouse the picture would change and you would hear that band member saying something, then when you click on them, they say something else and you'll be redirected to their page.

This alone isn't a problem, but for one member, I want it to take three clicks before you actually get redirected to his page; I also want him to say something different at each click.

So what I'm basically looking for is a way to create different events on the first, second and third click (preferably using javascript).

I hope you guys can help me out, thanks in advance!

Answer 1

Just use variable to count clicks:

var count = 0
$(".test").click(function() {
count++;
if(count == 1) {
        $(".test").text("first");
    }else if(count == 2){
        $(".test").text("second");
    }else if(count == 3){
        $(".test").text("third");
        count = 0;
    }    
})

http://jsfiddle.net/x83bf1gq/4/

Answer 2

An option could be to create an onclick handler that keeps saying things until all texts in an array of texts are said. Once all the texts have been said, you can just redirect or whatever action you need to be done. Example:

var johnTexts = [
    'hello',
    'how are you doing',
    'come on'
];
var jamesTexts = [
    'ready',
    'go'
];
var sayTexts = function (texts) {
    var i = 0;
    return function () {
        if (i < texts.length) {
            alert(texts[i++]);
        } else {
            alert('do your redirect or whatever you need');
        }
    };
}
document.getElementById('john').onclick = sayTexts(johnTexts);
document.getElementById('james').onclick = sayTexts(jamesTexts);

See demo

Answer 3

Simply set an event listener that makes different actions based on a global counter of clicks. Check this fragment of code:

//set counter
var counter = 0; 
var component = document.getElementByID("ID-of-component");

component.addEventListener('mouseover', function(){
     //do something
});

component.addEventListener('click', function() {
     switch(++counter) { 
         case 1: /* do something */ break;
         case 2: /* do something */ break;
         case 3: /* do something */ break;
     }

     counter = 0; //reset counter
});

Obviously, you have to write this code for each component of your band.