Applying CSS to the correctly placed letters

mehmetcuka

New Member
At the moment this code applies the CSS style to the word once it is complete. I need it to apply the style to the individual letters to determine whether they are correctly placed or not.\[code\]$(".drop").droppable({drop: function(event, ui) { word = $(this).data('word'); guesses[word].push($(ui.draggable).attr('data-letter')); console.log(guesses); if (guesses[word].length == 3) { if (guesses[word].join('') == word) { $('td[data-word=' + word + ']').addClass("wordglow2").fadeOut(1300); } else { $('td[data-word=' + word + ']').addClass("wordglow"); } }}}); \[/code\]The CSS is...\[code\].wordglow { -webkit-box-shadow: inset 2px 2px 20px 7px #ff0000; box-shadow: inset 2px 2px 20px 7px #ff0000;}.wordglow2 { -webkit-box-shadow: inset 2px 2px 20px 7px #22ff22; box-shadow: inset 2px 2px 20px 7px #22ff22;}\[/code\]I have tried this but have had no joy...\[code\]$(".drop").droppable({drop: function(event, ui) { word = $(this).data('word'); guesses[word].push($(ui.draggable).attr('data-letter')); console.log(guesses); if (guesses[word].length == 3) { if (guesses[word].join('') == word) { $('td[data-letter=' + word + ']').addClass("wordglow2").fadeOut(1300); } else { $('td[data-letter=' + word + ']').addClass("wordglow"); } }}});\[/code\]
 
Back
Top