Javascript 将CSS应用于正确放置的字母
目前,该代码在单词完成后将CSS样式应用于该单词。我需要它将样式应用于单个字母,以确定它们是否正确放置Javascript 将CSS应用于正确放置的字母,javascript,jquery,css,drag-and-drop,Javascript,Jquery,Css,Drag And Drop,目前,该代码在单词完成后将CSS样式应用于该单词。我需要它将样式应用于单个字母,以确定它们是否正确放置 $(".drop").droppable({ drop: function(event, ui) { word = $(this).data('word'); guesses[word].push($(ui.draggable).attr('data-letter')); console.log(guesses); if (guesses[word].le
$(".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");
}
}
}
});
CSS是
.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;
}
我已经试过了,但是没有快乐
$(".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");
}
}
}
});
你能发一个链接让我们看看问题吗?@sisko你有没有设法解决这个问题?抱歉,我看了一下,但无法理解这个游戏。我的意思是我把什么特征拖到哪里?你把字母拖到单词上,拼写单词。它还没有完成,这就是为什么它没有多大意义@西斯科我明白了,。。。和我在一起。所以当一封信的位置正确时。。换颜色!??
$(".drop").droppable({
drop: function(event, ui) {
word = $(this).data('word');
guesses[word].push($(ui.draggable).attr('data-letter'));
console.log($(event).toString().toSource());
console.log($(ui.draggable).text());
console.log('CHECKING : ' + $(this).text() + ' against ' + $(ui.draggable).text().trim());
if ($(this).text() == $(ui.draggable).text().trim()) {
$(this).addClass('wordglow3');
} else {
$(this).addClass('wordglow');
}
console.log('CHECKING : ' + $(this).text() + ' against ' + $(ui.draggable).text().trim());
console.log(guesses);
if (guesses[word].length == 3) {
if (guesses[word].join('') == word) {
$('td[data-word=' + word + ']').addClass("wordglow2");
} else {
$('td[data-word=' + word + ']').addClass("wordglow4");
}
}
},
activate: function(event, ui) {
word = $(this).data('word');
// try to remove the class
$('td[data-word=' + word + ']').removeClass('wordglow').removeClass('wordglow4').removeClass('wordglow3');
}
});