CODEWITHSUNDEEP
jquerycss
chilledMonkeyBrain
chilledMonkeyBrain

Reputation: 141

Jquery add class to element on click, remove that same class from previous item.

<img src="http://www.fillmurray.com/80/80">
<img src="http://www.fillmurray.com/80/80">
<img src="http://www.fillmurray.com/80/80">
<img src="http://www.fillmurray.com/80/80">

img.active {
    border: 5px solid black;
}

$(function() {
    $('img').click(function() {
       $(this).toggleClass('active');
    });
});

https://jsfiddle.net/ChilledMonkeyBrain/sLv8gvy9/

Easy points to anyone who has basic knowledge of JQ. I've done this before, but I can't remember how. Been at it for ages, so need to ask for help.

Very simply, clicking on an image gives it a border. When you click on the next image it should remove the border from the previous image as well as adding it to the current image. What is this called again?!

Upvotes: 2

Views: 8043

Answers (3)

Pranav C Balan
Pranav C Balan

Reputation: 115222

You just need to remove the class using removeClass() also use not() to avoid clicked element otherwise toggling will not work 

$(function() {
  var $img = $('img').click(function() {
    $img.not(this).removeClass('active');
    // removing `active` class from images except clicked
    $(this).toggleClass('active');
    // toggling class `active` of clicked image
  });
});
img.active {
  border: 5px solid black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<img src="http://www.fillmurray.com/80/80">
<img src="http://www.fillmurray.com/80/80">
<img src="http://www.fillmurray.com/80/80">
<img src="http://www.fillmurray.com/80/80">

Also you can siblings() to select its siblings

$(function() {
  var $img = $('img').click(function() {
    $(this).toggleClass('active')
      // toglling active class of clicked image
      .siblings('img')
      // selecting siblings image        
      .removeClass('active');
    // removing class of them
  });
});
img.active {
  border: 5px solid black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<img src="http://www.fillmurray.com/80/80">
<img src="http://www.fillmurray.com/80/80">
<img src="http://www.fillmurray.com/80/80">
<img src="http://www.fillmurray.com/80/80">

Upvotes: 4

ryachza
ryachza

Reputation: 4540

I would removeClass from all, and then addClass to current:

$('img').removeClass('active');
$(this).addClass('active');

Depending on the situation, something more context specific may be needed, such as:

$(this).siblings('img').removeClass('active').end().addClass('active');

If there is a huge number of them and you want to avoid removeClass on all, you could limit the remove selector to img.active.

Upvotes: 7

War10ck
War10ck

Reputation: 12508

You can achieve this using .siblings() and the .end() to return to the original set up matched elements (i.e. this)...

$(function() {
    $('img').on('click', function() {
       $(this).siblings().removeClass('active').end().toggleClass('active');
    });
});
img.active {
    border: 5px solid black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img src="http://www.fillmurray.com/80/80">
<img src="http://www.fillmurray.com/80/80">
<img src="http://www.fillmurray.com/80/80">
<img src="http://www.fillmurray.com/80/80">

Upvotes: 2

Related Questions