将CSS应用于脚本

Applying CSS to script

本文关键字：脚本 应用于 CSS      更新时间：2023-10-13

我有这段代码。如何在每个结果上设置不同的CSS样式-正确&不准确的

CSS样式是wordglow1和wordglow2…

$(".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) {
            alert('Correct');
        } else {
            alert(guesses[word].join('') + ' is the incorrect spelling. The word is spelt - ' + word)
        }
        $('td[data-word=' + word + ']').droppable('disable');
        }
    }
});

这些是我需要分配给班级的条件。。。

<div id="rightanswer" class="wordglow2"></div>
<div id="wronganswer" class="wordglow"></div>

.addClass是您的朋友

$(".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) {
            $(selector).addClass('corrent');
            alert('Correct');
        } else {
            alert('Incorrect');
            $(selector).addClass('wrong spelling')
       }
            $('td[data-word=' + word + ']').droppable('disable');
            }    
        }
    });

您可以使用jQuery向相关元素添加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].length == 3) {
        if (guesses[word].join('') == word) {
            $('td[data-word=' + word + ']').addClass("wordglow2");
            alert('Correct');
        } else {
            $('td[data-word=' + word + ']').addClass("wordglow");
            alert('Incorrect');
        }
    }
}
});
相关文章：