Ci suit un petit exercice JavaScript: copiez collez les deux morceaux de code qui suivent dans une page jsfiddle.net

Si vous examinez le code JavaScript, il est très simple : l’objectif de l’exercice semble simple : il faut juste faire “flasher” les libellés les uns après les autres (c’est là que la difficulté se trouve).

Seul problème, avec le code qui suit et semble correct : ça ne fonctionne pas. L’exercice est… de trouver la solution en JavaScript.

Ne regardez pas la fin, car il y a la solution !.

Code HTML :

<table id="s-inscrire-infos">
    <tbody>
        <tr>
            <td id="label-nomprenom"> <span><label for="label-nomprenom"><b>Nom et prénom&nbsp;:&nbsp;</b></label></span> </td>
            <td> <span> <input type="text" name="nomprenom" id="nomprenom" class="form-nom-prenom" size="50" maxlength="50" /> </span> </td>
        </tr>
        <tr class="erreur" id="erreur-nomprenom" style="display:none">
            <td colspan="2">* Il faut renseigner votre nom et prénom</td>
        </tr>
        <tr>
            <td id="label-adresse1"> <span> <label for="label-adresse"> <b>Adresse ligne 1 :&nbsp;</b> <br /> <font size="-2">(ou nom de la société)&nbsp;</font> </label> </span> </td>
            <td> <span><input type="text" name="adresse1" id="adresse1" class="form-adresse" size="50" maxlength="60" /></span> <br /> <span class="tiny">Rue, voie, boîte postale, nom de société</span> </td>
        </tr>
        <tr class="erreur" id="erreur-adresse1" style="display:none">
            <td colspan="2">* Il faut au moins renseigner une ligne</td>
        </tr>
        <tr>
            <td id="label-adresse2"> <span><label for="label-adresse"><b>Adresse ligne 2 :&nbsp;</b> <br /> <font size="-2">(facultatif)&nbsp;</font> </label></span> </td>
            <td> <span><input type="text" name="adresse2" id="adresse2" class="form-adresse" size="50" maxlength="60" /></span> <br /> <span class="tiny">Appartement, bâtiment, étage, digicode, cedex, etc.</span> </td>
        </tr>
        <tr>
            <td id="label-cp"> <span><label for="label-cp"><b>Code postal&nbsp;:&nbsp;</b></label></span> </td>
            <td> <span> <input type="text" name="cp" id="cp" class="form-cp" size="20" maxlength="20" /> </span> </td>
        </tr>
        <tr class="erreur" id="erreur-cp" style="display:none">
            <td colspan="2">* Il faut renseigner votre code postal</td>
        </tr>
        <tr>
            <td id="label-ville"> <span><label for="label-ville"><b>Ville&nbsp;:&nbsp;</b></label></span> </td>
            <td> <span> <input type="text" name="ville" id="ville" class="form-ville" size="25" maxlength="50" /> </span> </td>
        </tr>
        <tr class="erreur" id="erreur-ville" style="display:none">
            <td colspan="2">* Il faut renseigner votre ville</td>
        </tr>
        <tr>
            <td id="label-tel"> <span> <label for="tel"><b>Numéro de téléphone&nbsp;:&nbsp;</b></label> </span> </td>
            <td> <span> <input type="text" name="tel" id="tel" class="form-tel" size="15" maxlength="20" /> </span> </td>
        </tr>
        <tr class="erreur" id="erreur-tel" style="display:none">
            <td colspan="2">* Il faut renseigner votre téléphone</td>
        </tr>
        <tr>
            <td colspan="2" class="form-submit"> <input type="submit" value="Valider" /> </td>
        </tr>
    </tbody>
</table>

Code JavaScript :

jQuery.fn.getBg = function() {
    return $(this).parents().filter(function() {
        var color = $(this).css('background-color');
        return color != 'transparent' && color != 'rgba(0, 0, 0, 0)';
    }).eq(0).css('background-color');
};

function flash(id, font_color, bg_color, nb) {
    var bc = $(id).getBg();
    var cl = $(id).css('color');
    var mx = parseInt(nb);
    if (mx <= 0) {
        mx = 1;
    }
    for (var i = 0; i < mx; i++) {
        $(id).animate({
            backgroundColor: bg_color,
            color: font_color
        }, 200).animate({
            backgroundColor: bc,
            color: cl
        });
    };
}

dataMessage = new Array("#erreur-nomprenom", "#erreur-adresse1", "#erreur-cp", "#erreur-ville", "#erreur-tel");
var theQueue = $({});
for (key in dataMessage) {
    var m = dataMessage[key];
    if (m.indexOf('#erreur') == 0) {
        console.log('should add:'+m);
        theQueue.queue('flash', function(next) {
           console.log('i will flash:'+m);
            $(m).fadeIn('slow', function() {
                flash('#label-' + this.id.substr(7), "#ffffff", "#aa0000", 3);
                next();
            });
        });
    }
}
theQueue.dequeue('flash');

Solution :

var theQueue = $({});
for (key in dataMessage) {
    var m = dataMessage[key];
    if (m.indexOf('#erreur') == 0) {
        console.log('should add:' + m);
        var toFlash = (function(m) {
            return function(next) {
                console.log('i will flash:' + m);
                $(m).fadeIn('slow', function() {
                    flash('#label-' + this.id.substr(7), "#ffffff", "#aa0000", 3);
                    next();
                });
            }
        })(m);
        theQueue.queue('flash', toFlash);
    }
}
theQueue.dequeue('flash');

Eh oui pas si évident que ça à trouver !

Merci à Julien pour son aide !

Si vous avez d’autres solutions n’hésitez pas à les mettre dans un commentaire en bas !