二次点击功能不同

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