Question

我正在尝试制作the子手游戏。我已经根据从可能的数组中选择的随机单词动态创建了Divs。我给了他们字母的“ id”，当正确猜测时，该字母应该会填充该Div。

我有：

if (possibleGuessArray.includes(userGuess)) {
    if (word.includes(userGuess)) {

                $(".blank-box").append(userGuess);

这是字母所在的所有Divs的类名称。这可行，但它会用我想要的字母填充所有Divs。我希望它仅填充id与猜测字母匹配的Div。这是我的整个代码：

$(document).ready(function () {
    console.log("ready!");

    possibleGuessArray = ["a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "l", "m", "n", "o", "p", "q", "r", "s", "t", "u", "v", "w", "x", "y", "z"]
    userGuessArray = [];
    correctGuessArray = [];



    var randomWords = [
        "dog",
        "cat",
        "america",
        "bootcamp",
        "javascript",
        "philadelphia"
    ]
    var word = randomWords[Math.floor(Math.random() * randomWords.length)]; {
        console.log(word);
    }
    var amount = word.length;
    console.log(amount);

    $("#display-word").on("click", function (event) {
        $("#word").html("New Word is: " + amount + " letters long.")
    })


    var str = word;
    var lettersOfWordArray = str.split("");
    console.log(lettersOfWordArray);


    for (var i = 0; i < lettersOfWordArray.length; i++) {
        jQuery('<div/>', {
            class: "blank-box",
            value: i,
            id: lettersOfWordArray[i]
        }).appendTo("#word-guessed");
    }

    var ids = [];
    $(".blank-box").each(function () { ids.push(this.id); });
    console.log("ids: " + ids);

    //if the letter guessed equals the id of the div, append the user guess to that div


    //event listener 
    document.onkeyup = function (event) {
        var userGuess = event.key;



        if (userGuessArray.includes(userGuess) || correctGuessArray.includes(userGuess)) {

            confirm("You have already guessed letter " + userGuess);

        } else {

            if (possibleGuessArray.includes(userGuess)) {
                if (word.includes(userGuess)) {

                    $(".blank-box").append(userGuess);
                    console.log(userGuess + " is correct");
                    correctGuessArray.push(userGuess);



                } else {
                    $("#guesses").append(userGuess + "-");
                    console.log("You guessed the wrong letter");
                    userGuessArray.push(userGuess);
                    console.log(userGuessArray);
                }


            } else {
                confirm(userGuess + "is not a valid guess. Please enter a letter!")
            }




        }//end of else for userGuessArray.includes(userGuess)

    } //document on key up

}); //document.ready

Answer 1

HTML中的

ID旨在唯一。由于这将是一个单词的字母，并且许多单词中的同一字母不止一次，因此可以保证会违反此规则。我相信（尽管我不确定）jQuery将使您摆脱困境。

但是，您可能需要考虑使用数据属性。每个sheet2可以具有class Pencil { constructor(color) { this.color = color; } intro() { console.log(`this is ${this.color} pencil`); } }; class SomePencil extends Pencil { constructor(color, type) { super(color); this.type = type; } }; class AnotherPencil extends SomePencil { constructor(color,type) { super(color, type); } }; let pen1 = new Pencil(); let pen2 = new SomePencil("red", "common"); let pen3 = new AnotherPencil("green"); console.log("type" in pen3); // true的属性，而您可以寻找该属性。 jQuery通过<div>函数支持此功能。

data-letter

严格来说，这不是一个“答案”，但值得考虑。

当用户输入与div的ID相匹配时，如何用用户输入填充div

1 个答案: