Keeping the correct style classes

Question

In my drag and drop game there is a grid that is populated with words that are hidden from the user. The aim of the game is to spell these words with the aid of a sound and a picture. The user spells a word by dragging and dropping the relevant letters onto the grid. If the letter is correct it will glow green with the class "wordglow3". If it is wrong it will glow red with "wordglow". At the moment I am having a problem because if I drop the correct letter on a word it glows red when it should glow green. It is weird because everything else works like it should after this happens, but I cannot find the source of the problem. Can anyone help?

Here is the script that applies the classes accordingly...

 drop: function(event, ui) {
        that = $('.spellword')[guesses[word].length];
        word = $(that).data('word');
        guesses[word].push($(ui.draggable).attr('data-letter'));

        if ($(that).text() == $(ui.draggable).text().trim()) {
            $(that).addClass('wordglow3').css('color', 'white');
            $(".minibutton").hide();
            $('.next').hide();
        } else {
            $(that).addClass('wordglow');
            $('.drag').css("color", "white");
            $(".minibutton").hide();
            $('.next').hide();
        }

Fiddle to help - http://jsfiddle.net/smilburn/Dxxmh/57/

Answer 1

Your condition seems to be wrong. $(that).text is always the empty string.

In the JSFiddle, if you replace it by $(that).data("letter") , everything (glow-color related) seems to work.