javascript - 使用 JQuery/JavaScript 表示 html 表中各种数组中的字符

Question

我在 Hangman 游戏中通过 J Query 以图形方式表示一些数据时遇到了一些问题 - 现在我正在研究 play(space) 函数的最后一部分，以考虑是否有超过一个正确猜测的单词中的字母并显示该字母的所有实例 - 我创建了一个函数来循环遍历由拆分单词创建的数组，我得到了这些字母的正确索引，我只是善良关于如何通过 J Query 正确地在我的表中的这些索引处显示这些字母&我有点陷入困境......我一直在 console.log - ing 我的数据&我得到了正确的数据(字母和数组中该字母的索引)，我现在只需要弄清楚如何在我的 html 表中以与表相对应的正确索引显示这些字母(我感觉有点卡住了，想知道这是否可能挽救 - 我确信一定有办法做到这一点，我只是还没有弄清楚 - 我不确定是否应该创建一个字典对象来将正确的字母与数组中的索引配对使用 .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

请注意，当您进行选择时，您会在控制台中收到以下错误:

Uncaught Error: Syntax error, unrecognized expression: :nth-of-type

那是因为这一行:

$(".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 的值:

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

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

Here is a working jsFiddle