3

現時点では、このコードは完成した単語に 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").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");

        }
    }
}
});
4

1 に答える 1

1 
$(".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');
}


 });
于 2012-07-20T09:59:31.410 に答える