Question

javascript或jquery

我有6个div，其ID为letter0，letter1，letter2，letter3，letter4和letter5。它们都包含1个字母。

我想检查所有6个div的字符lastUsedLetter。如果其中一个div包含lastUsedLetter（仅为1个字符），我想向该特定div添加.color类。

谢谢。（同样，如果div已经有一个ID im假设..那么它将同时拥有两者，.addclass也可以工作）

这是我的代码，很长。可能还有另一个问题。

我知道这会令人讨厌，我只是从javascript开始。抱歉

    <script>
    $(document).ready(function () {

        var words = ["ladder", "horse", "house", "car"];
        var guessedLetters = [];
        var letter0 = $('#letter0');
        var letter1 = $('#letter1');
        var letter2 = $('#letter2');
        var letter3 = $('#letter3');
        var letter4 = $('#letter4');
        var letter5 = $('#letter5');
        var letter6 = $('#letter6');
        var randomWord = words[Math.floor(Math.random() * words.length)];
        var startButton = $('#startButton');
        var gameModule = $("#gameModule");
        var guessedWord = $("#guessedWord");
        var wholeWord = $("#wholeWord");
        var usedLetters = $("#usedLetters");
        var guessCount = $("#guessCount");
        var guessNumber = 0;
        var wordLength = randomWord.length;
        console.log(wordLength);



        startButton.click(function () {
            startButton.css('opacity', '0');
            startButton.css('cursor', 'default');
            usedLetters.css('opacity', '.8');
            guessCount.css('opacity', '.8');
            for (i = 0; i < wordLength; i++) {

                guessedWord.append("_ ");

            }
            for (i = 0; i < wordLength; i++) {
                wholeWord.append("<div id='letter" + [i] + "'>" + randomWord.charAt(i) + "</div>");
            }

        });

        document.onkeydown = function (e) {

            var keyPress;

            if (typeof event !== 'undefined') {
                keyPress = event.keyCode;
            }
            else if (e) {
                keyPress = e.which;
            }

            guessedLetters.push(String.fromCharCode(keyPress));
            lastUsedLetter = guessedLetters.slice(-1)[0];
            lowerLastUsedLetter = lastUsedLetter.toLowerCase;
            usedLetters.append(lastUsedLetter.toLowerCase() + ", ");
            guessNumber++;
            guessCount.text("Guess count: " + guessNumber);



            document.querySelectorAll('div').forEach(e => e.textContent.includes('lastUsedLetter') ? e.classList.add("color") : false);
            return false;   // Prevents the default action
        };


    });

</script>

Answer 1

使用document.querySelectorAll获取div，并使用textContent属性，使用div方法查看includes是否包含单词。将类添加到使用element.classList.add()

返回true的div中

var lastUsedLetter="sfsdf";
document.querySelectorAll('div').forEach(e => e.textContent.includes(lastUsedLetter) ? e.classList.add("color") : false);

.color {
  background-color: green
}

<div class="letter0">
  lastUsedLetter </div>
<div class="letter1">
  dsds </div>
<div class="letter2">
  lastUsedLetter </div>
<div class="letter3">
  lastUsedLetter sfsdf fsfsd </div>
<div class="letter4">
  dsdsdsd</div>
<div class="letter5">
</div>

如果div包含字母，则将类添加到div

1 个答案: