1

我正在创建一个单词拼写，拖放游戏。当字母被拖到表格中的单词上时，会根据拼写的正确或错误触发样式。如果它是正确的，这个词就会消失，露出背后的画面。如果错误，字母会按照样式设置为红色。

我的问题是字母在整个游戏的其余部分都保持红色，这意味着后面的图像无法完成，因为它不允许你拼写发红的单词。我需要在下一个回合发生时采用这种风格，并允许您再次拼写该单词，有人可以帮我吗？

这是触发 CSS 的脚本...

$(".drop").droppable({ 

hoverClass: 'drophover',
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");


        } else {
            $('td[data-word=' + word + ']').addClass("wordglow");

        }
    }
}
});

这是这个的CSS...

.wordglow {
    -webkit-box-shadow: inset 20px 0px 10px 5px #ff0000;
    box-shadow: inset 0px 0px 10px 5px #ff0000;

}

.drop.wordglow2 {

    -webkit-box-shadow: inset 0px 0px 10px 5px #22ff22;
    box-shadow: inset 0px 0px 10px 5px #22ff22;
    visibility: hidden;
    opacity: 0;


}

我已经尝试过这样做，以使错误的答案再次可以拼写..

$('td[data-word=' + word + ']').addClass("wordglow").removeAttr('disabled');;
4

1 回答 1

1

您可以删除activate活动中的课程。因此，当一个对象发红光时，当您再次开始将其拖动到下一个位置时，红色就会消失！

$(".drop").droppable({ 
    hoverClass: 'drophover',
    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");
            } else {
                $('td[data-word=' + word + ']').addClass("wordglow");
            }
        }
    },

    // this event is triggered when a draggable object is activated
    activate: function(event, ui) {
        word = $(this).data('word');

        // try to remove the class
        $('td[data-word=' + word + ']').removeClass('wordglow');
    }
});
于 2012-07-19T08:24:05.983 回答