CODEWITHSUNDEEP
javascriptjquery
Zyonix
Zyonix

Reputation: 107

How to delete second previous class?

I have navigation menu. If i click another button, it deletes .active from that button and adds it to clicked button. I want to add class "previousButton" only to previous button. My solution gives previous class to all previous button.

$(".btn").first().addClass("active");

$(".btn").focus(function(){
  $(this).siblings("button").removeClass("active");
  $(this).addClass("active");


  if($(this).hasClass("active")) {
    $(this).prevAll().addClass("previous");
  }

  $(".previous").last().addClass("previousButton");



  
});
.active {color:green};
.previous {color: white};
.previousButton {color: pink};
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="buttons">
          <button class="btn" >1. Page</button>
          <button class="btn">2. Page</button>
          <button class="btn">3. Page</button>
          <button class="btn">4. Page</button>
          <button class="btn">5. Page</button>
 </div>

Upvotes: 0

Views: 54

Answers (2)

Danyal Imran
Danyal Imran

Reputation: 2605

Since I don't know jQuery, I'd propose an easy JavaScript solution. (you could easily translate it since the logic is quiet simple).

const buttons = document.getElementsByClassName('btn');

for (let i=0; i<buttons.length; i++) {
  buttons[i].addEventListener('click', function(event) {
    // clear all previous buttons
    const prevButton = document.getElementsByClassName('previous')[0];
    
    if (prevButton) prevButton.setAttribute('class', 'btn');
  
    // add previous class to active button
    document.getElementsByClassName('active')[0].setAttribute('class', 'btn previous');
    
    // add active class to current clicked button
    event.target.setAttribute('class', 'btn active');
  });
};
.active { color:green; } 
.previous { color: red; }
<div class="buttons">
          <button class="btn active">1. Page</button>
          <button class="btn">2. Page</button>
          <button class="btn">3. Page</button>
          <button class="btn">4. Page</button>
          <button class="btn">5. Page</button>
 </div>

Upvotes: 0

Mitya
Mitya

Reputation: 34556

You're adding the class to all previous siblings because that's precisely what you're instructing, via prevAll().

Instead you can just add this class in the same line as you remove the active class, provided you modify the selector to target specifically the element which currently has active, rather than all button siblings.

$(this).siblings(".active").removeClass("active").addClass('previous');

Furthermore, your condition is unnecessary since it will always resolve to true:

if ($(this).hasClass("active")) { //<-- always true - we added the class in the previous line

Putting it all together:

$(".btn").focus(function(){
    $(this).siblings(".active").removeClass("active").addClass('previous');
    $(this).addClass("active");
    $(".previous").last().addClass("previousButton");
});

Or to reduce the code even further, the first and second lines inside the callback can be merged:

$(this).addClass("active").siblings(".active").removeClass("active").addClass('previous');

Upvotes: 1

Related Questions