如果DIV包含字母，则将班级添加到Div

Question

javascript或jquery

我有6个Divs，IDS Letter0，Letter1，Letter2，Letter3，Letter4和Letter5。他们都包含1个字母。

我想检查所有6个Divs the the lastedletter。如果其中一个Divs包括Lastedletter（这只是1个字符），我想将class .color添加到该特定的div。

谢谢。（如果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方法的单词。将类添加到DIV中，该类使用element.classList.add()

返回true

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>