CODEWITHSUNDEEP
javascriptjqueryhtml
Hailei
Hailei

Reputation: 39

How to remove a class in a list of elements and add to another element Jquery?

html. The "active" class may be with the "render1", "render2", "render3" or "render4". It is with "render2" in this case:

<td class="render1">
<td class="render2 active">
<td class="render3">
<td class="render1">
<td class="tag1 active">
<td class="tag2 active">

I did this way...

 $(".render1").on("change", function(){
   $(".render1").removeClass().addClass("active");
   $(".render2").removeClass();
   $(".render3").removeClass();
   $(".render4").removeClass();
 });
$(".render2").on("change", function(){
   $(".render1").removeClass();
   $(".render2").removeClass().addClass("active");
   $(".render3").removeClass();
   $(".render4").removeClass();
 });
 $(".render3").on("change", function(){
   $(".render1").removeClass();
   $(".render2").removeClass();
   $(".render3").removeClass().addClass("active");
   $(".render4").removeClass();
 });
 $(".render4").on("change", function(){
   $(".render1").removeClass();
   $(".render2").removeClass();
   $(".render3").removeClass();
   $(".render4").removeClass().addClass("active");
 });

If I click "render3", the class it is removed from "render2" class and added to "render3". So the html will be end like this:

<td class="render1">
<td class="render2">
<td class="render3 active">
<td class="render1">
<td class="tag1 active">
<td class="tag2 active">

It is not really working on my computer. Is there a better way to do this? Thanks a lot!

Upvotes: 1

Views: 74

Answers (5)

Benjamin Ray
Benjamin Ray

Reputation: 1870

Sam Thornton has the best answer so far.

Keep in mind that removeClass() with no parameters is still perfectly valid, but it removes all classes from the selected object(s). That is not what you wanted to do this time around, but it may come in handy in the future.

I would encourage you to always become familiar with the documentation, which in this case is located here: http://api.jquery.com/removeclass/

Upvotes: 0

Sam Thornton
Sam Thornton

Reputation: 983

+1 to both @Wilmer and @marsh. I'll also add that you can DRY up your code by just calling on 'click' for any valid element (you can add a common class between them to make it easy, but in the example I'll just use td):

$('td').on('click', function() {
  $('.active').removeClass('active');
  $(this).addClass('active');
});

Though, if you want to only deal with the same 'type' of (e.g. .renderX or .tagX), I'd add a class to each.

<td class="render render1"></td>
<td class="render render2 active"></td>
<td class="tag tag1 active"></td>
<td class="tag tag2></td>

And then:

$('.render').on('click', function() {
  $('.render.active').removeClass('active');
  $(this).addClass('active');
});

Or, alternatively, check for class similarities (and no need to add extra classes):

$('td').on('click', function() {
  var classNameType = $(this).attr('class').replace(/\d|\s|active/gi, '');
  var selector = "[class*=" + classNameType + "]";
  $(selector).removeClass('active');
  $(this).addClass('active');
});

Here's an example of that last one: http://codepen.io/anon/pen/gbBNpV

Upvotes: 1

Wilmer
Wilmer

Reputation: 2511

You have to specify which class you want to remove try .removeClass("active"). Also jQuery is "smart" if you add the same class twice it will not duplicate so you don't need to remove it.

Upvotes: 0

bvaughn
bvaughn

Reputation: 13487

Seems kind of a weird way to do things, but...

$(".render1").on("click", function(){
   $(".render1").removeClass("active").addClass("active");
   $(".render2").removeClass("active");
   $(".render3").removeClass("active");
   $(".render4").removeClass("active");
 });
$(".render2").on("click", function(){
   $(".render1").removeClass("active");
   $(".render2").removeClass("active").addClass("active");
   $(".render3").removeClass("active");
   $(".render4").removeClass("active");
 });
 $(".render3").on("click", function(){
   $(".render1").removeClass("active");
   $(".render2").removeClass("active");
   $(".render3").removeClass("active").addClass("active");
   $(".render4").removeClass("active");
 });
 $(".render4").on("click", function(){
   $(".render1").removeClass("active");
   $(".render2").removeClass("active");
   $(".render3").removeClass("active");
   $(".render4").removeClass("active").addClass("active");
 });

http://jsfiddle.net/bvaughn/ung70b84/

Upvotes: 0

marsh
marsh

Reputation: 1441

Use click event instead of change

$(<element>).on("click", function(){
   ...
 });

Upvotes: 0

Related Questions