CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Erik L
Erik L

Reputation: 195

How to select matching values in jquery?

Hello I am new to programming, so I am creating a word guessing game Word Guessing Game

and I have the following code:

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');
    }
  });
}

So basically I am trying to reveal the letters that the player guesses right. My code works, but instead of only the matching letters being revealed, the entire phrase shows up. Can someone please help?

Upvotes: 0

Views: 772

Answers (2)

nbrooks
nbrooks

Reputation: 18233

Only add the show class to the specific matching panel. Within the context of each, the keyword this will refer to the current element in the matched set:

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

Demo: 

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

Upvotes: 2

Tony Bui
Tony Bui

Reputation: 1299

Could you try to change the:

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

Instead of: 

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

It will target the current html tag you are targeting.

Upvotes: 0

Related Questions