CODEWITHSUNDEEP
javascriptjquery
jQueryster
jQueryster

Reputation: 169

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

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.

Upvotes: 0

Views: 316

Answers (4)

EternalHour
EternalHour

Reputation: 8621

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>

Upvotes: 1

stan chacon
stan chacon

Reputation: 768

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

Upvotes: 1

Computeshorts
Computeshorts

Reputation: 616

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()];

});

Upvotes: 1

Tom Lima
Tom Lima

Reputation: 1056

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;

Upvotes: 1

Related Questions