How to add a class to the selected span in jQuery?

Question

I'm trying to set a class (highlighted) to the span been selected and removing it when another span has been selected. Where do I need to set this class?

This is for a king of telephone keypad I'm working on. I'm basically working on a code that someone just answered on a previous question I posted. I've been trying to set this class, but I can't make it work as I wish.

Here is the code: http://jsfiddle.net/b6wfeaxz/3/

JS / jQuery

var index     = 0;
var direction = 1;

$(".button").on("click", function () {

  var $this = $(this);

  if ($this.hasClass("selected")) {
    if (index >= $this.find(".letter").length - 1) {
        direction *= -1;
    } else if (direction == -1 && index == 0) {
        direction *= -1;
    }

        $(this).children(".letter").eq(index).addClass('highlighted');
    index += direction;
  } else {
    $(".button").removeClass("selected");
    $this.addClass("selected");

    index = 0;
  }

  var result = $(this).children(".letter").eq(index).text();

  $(".result").text(result);

});

HTML -

<div class="keypad">
  <div class="button">
    <div class="num">1</div>
    <span class="letter">A</span>
    <span class="letter">B</span>
    <span class="letter">C</span>
  </div>
  <div class="button">
    <div class="num">2</div>
    <span class="letter">D</span>
    <span class="letter">E</span>
    <span class="letter">F</span>
  </div>
  <div class="button">
    <div class="num">3</div>
    <span class="letter">G</span>
    <span class="letter">H</span>
    <span class="letter">I</span>
  </div>
</div>

CSS

 .highlighted {
   border: 1px solid red;
 }

I expect the span to be selected by adding the class highlighted and be removed when another letter has been selected.

Answer 1

From what I could understand the problem is removing the class from the unselected letters, right? Try using the each function to remove the class from all letters first.

Like this:

$('.letter').each(function(){
    $(this).removeClass('highlighted');
})
$(this).children(".letter").eq(index).addClass('highlighted');
index += direction;

Answer 2

This is a quick fix. Basically you keep an array of all the directions and indexes for each of the buttons. Then you select which one you need to edit by the index of the button clicked. This is not an ideal solution but it works. Hopefully that helped.

var index     = [0,0,0];
var direction = [1,1,1];

$(".button").on("click", function () {

  var $this = $(this);
    if (index[$this.index()] >= $this.find(".letter").length - 1) {
        direction[$this.index()] *= -1;
    } else if (direction[$this.index()] == -1 && index[$this.index()] == 0) {           
        direction[$this.index()] *= -1;
    }
    $('.letter').each(function(){
        $(this).removeClass('highlighted');
    })
    $(this).children(".letter").eq(index[$this.index()]).addClass('highlighted');

  var result = $(this).children(".letter").eq(index[$this.index()]).text();
  $(".result").text(result);
  //you have to add to the index after the result
  index[$this.index()] += direction[$this.index()];

});

Answer 3

This is a different approach, but seems easier to separate the highlight logic from the selected click event.

 var index = 0; var direction = 1; $(".button").on("click", function () { var $this = $(this); if ($this.hasClass("selected")) { if (index >= $this.find(".letter").length - 1) { direction *= -1; } else if (direction == -1 && index == 0) { direction *= -1; } index += direction; } else { $(".button").removeClass("selected"); $this.addClass("selected"); index = 0; } removeHighlight(); $(this).find('span.letters').addClass('highlighted'); var result = $(this).find(".letter").eq(index).text(); $(".result").text(result); }); function removeHighlight() { var $letters = $('div.keypad').find('.letters'); $letters.each(function() { $(this).removeClass('highlighted'); }); } 

 .button { float: left; width: 100px; height: 100px; margin: 20px 20px; } .num { font-size: 50px; } .result { font-size: 100px; color: blue; padding: 50px; } .highlighted { border: 1px solid red; } div.num { cursor: pointer; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <div class="result">A</div> <div class="keypad"> <div class="button"> <div class="num">1</div> <span class="letters"> <span class="letter">A</span> <span class="letter">B</span> <span class="letter">C</span> </span> </div> <div class="button"> <div class="num">2</div> <span class="letters"> <span class="letter">D</span> <span class="letter">E</span> <span class="letter">F</span> </span> </div> <div class="button"> <div class="num">3</div> <span class="letters"> <span class="letter">G</span> <span class="letter">H</span> <span class="letter">I</span> </span> </div> </div> 

Answer 4

Hi I have change your code a bit the changes are :

1. Add a counter to detect each click.

2. Add a num variable and actual_number in order to reset the counter between buttons.

     var counter = 0; var num = ""; $(".button").on("click", function (e) { var $this = $(this); actual_number = $(this).children(".num").text(); if(counter < 3 && num == actual_number ){ $(".letter").removeClass('highlighted'); $(this).children(".letter").eq(counter).addClass('highlighted'); var result = $(this).children(".letter").eq(counter).text(); $(".result").text(result); counter++; }else{ counter=0; num = $(this).children(".num").text(); $(".letter").removeClass('highlighted'); $(this).children(".letter").eq(counter).addClass('highlighted'); var result = $(this).children(".letter").eq(counter).text(); $(".result").text(result); counter++; } }) 

     .button { float: left; width: 100px; height: 100px; margin: 20px 20px; } .num { font-size: 50px; } .result { font-size: 100px; color: blue; padding: 50px; } .highlighted { border: 1px solid red; } 

     <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="result">A</div> <div class="keypad"> <div class="button"> <div class="num">1</div> <span class="letter">A</span> <span class="letter">B</span> <span class="letter">C</span> </div> <div class="button"> <div class="num">2</div> <span class="letter">D</span> <span class="letter">E</span> <span class="letter">F</span> </div> <div class="button"> <div class="num">3</div> <span class="letter">G</span> <span class="letter">H</span> <span class="letter">I</span> </div> </div> 

Hope it helps