Question

我目前正在为我的乐队制作一个网站，我有一个想法就是在特定页面上，你会看到每个乐队成员的照片，当你用鼠标悬停在它上面时图片会改变，你会听到乐队成员说些什么，然后当你点击它们时，他们会说别的话，你会被重定向到他们的页面。

仅这一点不是问题，但对于一个成员，我希望在实际重定向到他的页面之前需要三次点击;我也希望他在每次点击时说出不同的内容。

所以我基本上想要的是在第一次，第二次和第三次点击时创建不同事件的方法（最好使用javascript）。

我希望你们能帮助我，提前谢谢！

Answer 1

只需使用变量来计算点击次数：

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

一个选项可能是创建一个onclick处理程序，该句柄一直说出来，直到说出文本数组中的所有文本。一旦说完所有文本，您就可以重定向或者您需要完成的任何操作。例如：

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

请参阅demo

Answer 3

只需设置一个事件监听器，该监听器根据点击的全局计数器执行不同的操作。检查这段代码：

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

显然，您必须为乐队的每个组件编写此代码。

第二次和第三次点击活动

3 个答案: