javascript - 第二次点击的不同功能

Question

我设法设置了一个脚本来更改表格中的字符并更改某些字符的颜色。我想要做的是在第二次点击时有不同的字符和颜色，但我不知道我会怎么做。

var isStart = false;
var letterString = "D0E916C0A8CED059359C02DARREN KORB - PALE WATCHERS.mp3E415AAB0014400E104B40DE96A0";
var letters = letterString.split('');
var currentLetter = 0;
var intervalID;

function changeLetter() {
    $("#t-"+currentLetter).text(letters[currentLetter - 1]);
    currentLetter +=1 ;
    if (currentLetter == 23) {
        $("#t-23").css("color", "#d49a9a");   
    }
    if (currentLetter == 24) {
        $("#t-24").css("color", "#d49a9a");             
    }
    if (currentLetter == 25) {
        $("#t-25").css("color", "#d49a9a");             
    }
        if (currentLetter == 26) {
           $("#t-26").css("color", "#d49a9a");             
    }
}


$(document).ready(function() {
    var image = $('#content').click(function() {
        if  (!isStart) {
            isStart = true;
           intervalID =  setInterval(changeLetter, 100);
        }
    });
});

Answer 1

添加一个变量来计算点击次数，然后在您的点击函数中，递增并检查该值以确定您要执行的操作。像这样：

var currentLetter = 0;
var intervalID;
var clickCount = 0; // <-- add this line


if  (!isStart) {
    clickCount++;
    if (clickCount == 1) {
        //do the first click stuff
    }
    if (clickCount == 2) {
        //do the second click stuff
    }
}

如果您想处理两次以上的点击，您可能需要使用 switch 语句，默认情况下将针对您未专门处理的所有计数。

Answer 2

使用 jQuery 的.one()方法。它允许您捕获一次事件，然后您可以通过后续点击执行其他操作。

var image = $('#content').one('click' function() {
    // doSomething

    $(this).on('click', function() {
        if  (!isStart) {
            isStart = true;
           intervalID =  setInterval(changeLetter, 100);
        }
    });
});