二次点击功能不同

Question

I've managed to set up a script that changes the characters in a table and changes the colour of certain ones. What I want to do is have different characters and colours on the second click but I have no idea how I would go about it.

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

Add a variable to count the number of clicks and then in your click function, increment and check the value to determine what you want to do. Like this:

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

If you want to handle more than two clicks, you may want to use a switch statement, and the default case would be for all counts thats you don't specifically handle.

Answer 2

Use jQuery's .one() method. It allows you to catch an event once, then you can do something else with subsequent clicks.

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

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