用JQuery/JavaScript表示html表中不同数组中的字符

Question

在我的Hangman游戏中，我遇到了一些通过J查询以图形方式表示我的一些数据的问题-现在我正在处理play(space)函数的最后一部分，以考虑一个单词中是否有超过一个正确猜测的字母，并显示该字母的所有实例-我已经做了一个函数来循环通过拆分单词创建的数组，我正在获得这些字母的正确索引，我只是有点卡住了，不知道如何通过J查询在我的表中正确地显示这些索引中的这些字母&我有点卡住了……我一直在console.log我的数据&我得到了正确的数据(字母和数组中该字母的索引)，我现在只需要弄清楚如何在html表中以与表对应的正确索引显示这些字母(我感觉有点卡住了&想知道这是否有可能挽救-我相信一定有办法做到这一点，我只是没有弄清楚这一点-我不确定是否应该创建一个dictionary对象来将正确的字母与数组中的索引配对，以便使用.each()循环在我的表中以图形方式表示，或者是否有一种方法以图形方式表示它(数据是原样)。我真的很感谢任何人的帮助。

下面是我的代码: JS/JQuery：

var wordBank = ["modernism", "situationalist", "sartre", "camus", "hegel", "lacan", "barthes", "baudrillard", "foucault", "debord", "baudrillard"];
var word = [];
var wrongGuesses = [];
var rightGuesses = [];
var images = [gallows, head, body, armL, handL, armR, handR, legL, footL, legR, footR];
var y = 0;
var i = 1;
$(document).ready(function() {
  function randomWord() {
    var random = Math.floor(Math.random() * wordBank.length);
    var toString = wordBank[random];
    console.log(toString);
    word = toString.split("");
    console.log(word);
  }
  randomWord();

  function wordSpaces() {
    for (var i = 0; i < word.length; i++) {
      $(".word-spaces > tbody > tr").append('<td data-idx=i>' + word[i] + '</td>')
    }
  }
  wordSpaces();

  function play(space) {
    //indexOf()==inArray() 
    var lIndex = jQuery.inArray(space, word);
    console.log(lIndex);
    if (lIndex == -1) {
      wrongGuesses.push(space);
      var wrong = wrongGuesses.length;
      console.log('wrong ' + wrong);
      $('.wrongLetters tbody tr td:nth-of-type(' + wrong + ')').text(space);

//      $(this).css("background-color", "#ff4500").fadeIn(300).delay(800).fadeOut(300);
      $(images[i - 1]).hide();
      $(images[i]).show();
      i++;
      $("html").css("background-color", "#ff4500").fadeIn(300).delay(300).fadeOut(300).fadeIn(100);
      console.log(word);
    } else { 
      console.log(word + "word"); 
      console.log(space + "space");
        function getInstances(word,space) {
          var indexes = [], w;
          for(w=0; w<word.length;w++ )
          if (word[w] === space)
          indexes.push(w);
          return indexes;
        }
      console.log(word + "word"); 
      console.log(space + "space");
      var indexes = getInstances(word, space);
      console.log(indexes);
      rightGuesses.push(space);
      console.log(rightGuesses); 
      $(".word-spaces tbody tr td:nth-of-type(" + indexes + ")").css('color', 'black');
  //    rightGuesses.push(space);

    }
  }

  $(".form-control").keypress(function(event) {
    var keycode = (event.keyCode ? event.keyCode : event.which);
    if (keycode == 13) {
      var space = $(this).val();
      play(space);
      $(this).val('');
      endGame();
      return false;
    }
  });


  function endGame() {
    if (wrongGuesses.length >= 10 || rightGuesses.length == word.length) {
      $("body").css("background-color", "#ff4500");
      $(".form-control").prop('disabled', true);
    }

  }

});
html:
<header>
  <h2 style="font-family:paganini;">
    Hangman
    </h2>
</header>
<main style="font-family:paganini;">
  <figure class="hangman">
    <img src="https://i.imgur.com/gSxmkUf.gif" id="gallows" align="middle top">
    <img src="https://i.imgur.com/Mb4owx9.gif" id="head" align="middle top" style="display:none;">
    <img src="https://i.imgur.com/xkXISte.gif" id="body" align="middle top" style="display:none;">
    <img src="https://i.imgur.com/U44ReUi.gif" id="armL" align="middle top" style="display:none;">
    <img src="https://i.imgur.com/49kkaQF.gif" id="handL" align="middle top" style="display:none;">
    <img src="https://i.imgur.com/tqtNazW.gif" id="armR" align="middle top" style="display:none;">
    <img src="https://i.imgur.com/ydnz7eX.gif" id="handR" align="middle top" style="display:none;">
    <img src="https://i.imgur.com/dlL7Kek.gif" id="legL" align="middle top" style="display:none;">
    <img src="https://i.imgur.com/3AQYFV9.gif" id="footL" align="middle top" style="display:none;">
    <img src="https://i.imgur.com/j9noEN7.gif" id="legR" align="middle top" style="display:none;">
    <img src="https://i.imgur.com/kJofX7M.gif" id="footR" align="middle top" style="display:none;">
  </figure>

  <table class="word-spaces">
    <caption>Your Word is: </caption>
    <tbody>
      <tr>
      </tr>
    </tbody>
  </table>
  <br/>
  <fieldset class="guessIn">
    <legend>
      Guess a Letter
    </legend>
    <label for="form">Type a Letter then Click <b>Enter</b></label>
    <input type="text" id="form" class="form-control" placeholder="guess">

  </fieldset>

  <table class="wrongLetters">
    <caption>Letters Guessed Wrong:</caption>
    <tbody>
      <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
    </tbody>
  </table>
</main>
<footer>
</footer>

Answer 1

请注意，当您进行选择时，控制台中会出现以下错误：

未捕获错误:语法错误，无法识别的表达式：：n类型

这是因为这一行：

$(".word-spaces tbody tr td:nth-of-type(" + indexes + ")").css('color', 'black');

由于正确的猜测可以设置多个索引，因此您需要使用循环来进行正确的猜测，如下所示：

$.each(indexes,function(e,i){
    $(".word-spaces tbody tr td:nth-of-type(" + i + ")").css('color', 'black');
})

此外，我认为这一行是错误的：

 $(".word-spaces > tbody > tr").append('<td data-idx=i>' + word[i] + '</td>')

您可能想要使用I like的值：

$(".word-spaces > tbody > tr").append('<td data-idx='+i+'>' + word[i] + '</td>')

(尽管您实际上根本不需要data-idx属性，因为它始终与tr标记中的子索引相同，并且您无论如何都要使用它来获取单元格)

Here is a working jsFiddle

Answer 2

我自己弄明白了(我有点惊慌)是这样的:首先我创建了一个.forEach循环来循环遍历单词，然后问题是JS &html/css中的btwn数组连接的区别……我创建了索引变量，并添加了一个&在括号外还添加了一个加号...所以，这就解决了这个问题：

Indexes.forEach(函数(索引){$(“.word-space tr tr td:nth-of-type(”+(索引+ 1) +“)”).css(‘颜色’，‘黑色’)；})；

Answer 3

好了，它现在可以做所有的事情了。除了first version's features之外，版本2还具有以下特性：

• 如果一个字母被猜错不止一次，会有警告通知玩家，并忽略它。
• 如果一个正确的猜测有多个字母，所有的字母都将是带有消息的

endGame()函数，但它还需要一个修复，我会把这个修复留给你;-)

​

<!doctype>
<html>

<head>
    <meta charset="utf-8">
    <title>35387864</title>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
    <style>
        html {
            font: 400 16px/1.428 'Verdana';
        }
        
        main {
            padding: 20px;
        }
        
        footer,
        header {
            padding: 5px 20px;
        }
        
        footer {
            border-top: 2px ridge #666;
        }
        
        header {
            border-bottom: 2px ridge #666;
        }
        
        .wordSpaces,
        .wrongLetters {
            border: 1px ridge grey;
            table-layout: fixed;
            border-collapse: collapse;
            margin: 10px 0;
        }
        
        .wordSpaces td,
        .wrongLetters td {
            border: 2px inset #BBB;
            width: 3ch;
            height: 1.5rem;
            padding: 1px;
            text-align: center;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
            color: white;
        }
        
        .wrongLetters td {
            color: red;
        }
        
        .form-control {
            width: 10ch;
            text-align: center;
        }
        
        ul {
            font-size: 1rem;
            list-style: none;
            padding-left: 0;
        }
        
        .msg {
            font-size: 0;
            color: #000;
            text-align: center;
        }
    </style>
</head>

<body>
    <header>
        <h2> Hangman </h2>
    </header>
    <main>
        <figure class="hangman"> <img src="https://i.imgur.com/gSxmkUf.gif" id="gallows" align="middle top"> <img src="https://i.imgur.com/Mb4owx9.gif" id="head" align="middle top" style="display:none;"> <img src="https://i.imgur.com/xkXISte.gif" id="body" align="middle top" style="display:none;"> <img src="https://i.imgur.com/U44ReUi.gif" id="armL" align="middle top" style="display:none;"> <img src="https://i.imgur.com/49kkaQF.gif" id="handL" align="middle top" style="display:none;"> <img src="https://i.imgur.com/tqtNazW.gif" id="armR" align="middle top" style="display:none;"> <img src="https://i.imgur.com/ydnz7eX.gif" id="handR" align="middle top" style="display:none;"> <img src="https://i.imgur.com/dlL7Kek.gif" id="legL" align="middle top" style="display:none;"> <img src="https://i.imgur.com/3AQYFV9.gif" id="footL" align="middle top" style="display:none;"> <img src="https://i.imgur.com/j9noEN7.gif" id="legR" align="middle top" style="display:none;"> <img src="https://i.imgur.com/kJofX7M.gif" id="footR" align="middle top" style="display:none;"> </figure>
        <table class="wordSpaces">
            <caption>
                Your Word is:
            </caption>
            <tbody>
                <tr>
                </tr>
            </tbody>
        </table>
        <br/>
        <h1 class="msg">
</h1>
        <fieldset class="guessIn">
            <legend> Guess a Letter </legend>
            <label for="form">Type a Letter then Click <kbd>Enter</kbd></label>
            <input type="text" id="form" class="form-control" placeholder="guess" maxlength="1" required/>
        </fieldset>
        <table class="wrongLetters">
            <caption>
                Letters Guessed Wrong:
            </caption>
            <tbody>
                <tr>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>
            </tbody>
        </table>
    </main>
    <footer>
        <ul>
            <li><a href="https://stackoverflow.com/questions/35387864/hangman-gameplay-in-javascript">Hangman Gameplay in JavaScript</a></li>
            <li><a href="https://jsfiddle.net/zer00ne/0fa56t3s/">jsFiddle</a></li>
        </ul>
    </footer>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
    <script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
    <script>
        var wordBank = ["modernism", "situationalist", "sartre", "camus", "hegel", "lacan", "barthes", "baudrillard", "foucault", "debord", "baudrillard"];
        /*var wordBank = ["xxxbnvkllyyybns"];*/
        var word = [];
        var wrongGuesses = [];
        var rightGuesses = [];
        var images = [gallows, head, body, armL, handL, armR, handR, legL, footL, legR, footR];
        var img = 1;

        $(document).ready(function() {
            function randomWord() {
                var random = Math.floor(Math.random() * wordBank.length);
                var toString = wordBank[random];
                console.log(toString);
                word = toString.split("");
                console.log(word);
            }
            randomWord();

            function wordSpaces() {
                for (var i = 0; i < word.length; i++) {
                    $(".wordSpaces > tbody > tr").append('<td data-idx=i>' + word[i] + '</td>')
                }
            }
            wordSpaces();

            function play(letter) {
                var wIdx = jQuery.inArray(letter, word);
                var wrong = wrongGuesses.length;
                if (wIdx === -1) {
                    if (wrong === 0) {
                        wrongGuesses.push(letter);
                        $('.wrongLetters tbody tr td:first-of-type').text(letter);
                        hangman();
                    } else {

                        for (var j = 0; j < wrong; j++) {
                            if (wrongGuesses[j] === letter) {
                                alert('The "' + letter + '" has already beem played.\nPlease try again.');
                                return true;
                            }
                            console.log('wrong' + wrong);
                        }
                        wrongGuesses.push(letter);
                        $('.wrongLetters tbody tr td:nth-of-type(' + (wrong + 1) + ')').text(letter);
                        hangman();
                    }
                } else {
                    for (var w = 0; w < word.length; w++) {
                        if (word[w] === letter) {
                            W = w + 1;
                            $(".wordSpaces tbody tr td:nth-of-type(" + W + ")").css("color", "black");
                            rightGuesses.push(letter);
                        }
                    }
                }
            }
            $(".form-control").keypress(function(event) {
                var keycode = (event.keyCode ? event.keyCode : event.which);
                if (keycode == 13) {
                    var letter = $(this).val();
                    play(letter);
                    $(this).val('');
                    endGame();
                    return false;
                }
            });

            function hangman() {
                $(images[img - 1]).hide();
                $(images[img]).show();
                img++;
                $("html").css("background-color", "#ff4500").fadeIn(300).delay(300).fadeOut(300).fadeIn(100);
            }

            function endGame() {
                if (rightGuesses.length == word.length) {
                    $("body").css("background-color", "rgba(0, 185, 41, .3)");
                    $(".msg").text(word + " is correct!\nYou win!").css("font-size", "24px");
                    $(".form-control").prop('disabled', true);
                } else if (wrongGuesses.length === 10) {
                    $("body").css("background-color", "rgba(227, 0, 0, .3)");
                    $(".msg").text(word + " was the answer.\nYou lose.").css("font-size", "24px");
                    $(".form-control").prop('disabled', true);
                } else return false;
            }

        });
    </script>
</body>

</html>

​