Но чтобы заполнить div пользовательским вводом, когда пользовательский ввод совпадает с id div - PullRequest
Новая
       20

Но чтобы заполнить div пользовательским вводом, когда пользовательский ввод совпадает с id div

0 голосов
/ 13 ноября 2018

Я пытаюсь построить игру палача. Я динамически создавал Div на основе случайного слова, выбранного из моих возможных массивов. Я дал им «id» буквы, которая должна правильно заполнять этот Div.

У меня есть: 

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

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

Это имя класса всех Div, куда пойдут буквы. Это работает, но заполняет все элементы Div буквой, которую я хочу Я хочу, чтобы он заполнял только Div, где id соответствует угаданной букве. Вот весь мой код: 

$(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

1 Ответ

0 голосов
/ 13 ноября 2018

идентификаторов в HTML предназначены для уникальности. Поскольку это будет буква слова, и многие слова содержат в себе одну и ту же букву более одного раза, это гарантирует нарушение этого правила. Я верю (хотя я не уверен), что jQuery позволит вам сойти с рук.

Однако вы можете рассмотреть возможность использования атрибутов данных. Каждый <div> может иметь атрибут, скажем, data-letter, и вы можете искать его вместо этого. jQuery поддерживает это с помощью функции .data. 

$(".blank-box").each(function () { ids.push(this.data('letter'); });

Не совсем "ответ", но кое-что заслуживающее внимания.

...