如何在jquery中选择匹配的值？

Question

你好，我是编程新手，所以我正在创建一个猜词游戏

，我有以下代码：

• （字母）代表玩家正在键入的键
• var compareLetters = $（'。letter'）表示顶部的空框
• const game = new Game（），这是一个名为Game的类构造函数的新实例，它具有一个名为this.phrases的属性，该短语包含一组短语

---

showMatchedLetter(letter) {
  //if there was a match on the checkLetter method, then add a show letter class

  //grab letters and put them in a variable
  var compareLetters = $('.letter');

  //I created a new game instance in order to access the array property for the loop below
  const game = new Game()

  //give phrase array a variable to have a reference to it
  const phraseArray = game.phrases;
  console.log(phraseArray)

  /*use a each method to loop through the array of Phrase characters,
    and compare each char to the letter that was selected by the player.
    */
  compareLetters.each((i, compareLetters) => {
    if ($(compareLetters).text() === letter) {
      $('.letter').addClass('show letter');
    }
  });
}

所以基本上，我试图揭示玩家猜对的字母。我的代码可以运行，但是整个短语会显示出来，而不仅仅是显示匹配的字母。有人可以帮忙吗？

Answer 1

仅将show类添加到特定的匹配面板。在each的上下文中，关键字this将引用匹配集中的当前元素：

function showMatchedLetter(letter) {    
    $('.letter').each(function() {
        if ($(this).text() === letter) {
            $(this).addClass('show');
        }
    });
}

演示：

$(function() {

  function showMatchedLetter(letter) {
    $('.letter').each(function() {
      if ($(this).text() === letter) {
        $(this).addClass('show');
      }
    });
  }

  $("input").change(function(e) {
    let letter = $(e.target).val()
      .replace(/[^a-z]/ig, '')
      .toUpperCase().substring(0, 1);

    showMatchedLetter(letter);

    $(e.target).val('');
    setTimeout(_ => $(e.target).focus(), 100);
  });
});

span.show {
  background-color: gray;
}

div {
  width: 280px;
}

div>span {
  color: black;
  background-color: black;
  display: inline-block;
  opacity: 1;
  width: 25px;
  height: 25px;
  line-height: 25px;
  text-align: center;
  border: 2px solid blue;
  padding: 0px;
  margin: 3px 0px 0px 0px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input placeholder="Enter a letter" /><button>Go</button>
<div>
  <span class="letter">A</span>
  <span class="letter">B</span>
  <span class="letter">C</span>
  <span class="letter">D</span>
  <span class="letter">E</span>
  <span class="letter">F</span>
  <span class="letter">G</span>
  <span class="letter">H</span>
  <span class="letter">I</span>
  <span class="letter">J</span>
  <span class="letter">K</span>
  <span class="letter">L</span>
  <span class="letter">M</span>
  <span class="letter">N</span>
  <span class="letter">O</span>
  <span class="letter">P</span>
  <span class="letter">Q</span>
  <span class="letter">R</span>
  <span class="letter">S</span>
  <span class="letter">T</span>
  <span class="letter">U</span>
  <span class="letter">V</span>
  <span class="letter">W</span>
  <span class="letter">X</span>
</div>

Answer 2

您可以尝试更改以下内容吗？

$(this).addClass('show letter'); //Or change this to another by use parent and child relative such as $(this).parent(), $(this).children()

代替：

$('.letter').addClass('show letter');

它将定位您要定位的当前html标签。