如何删除元素列表中的类并添加到另一个元素Jquery？

Question

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!

Answer 1

+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 (eg .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

Answer 2

Use click event instead of change

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

Answer 3

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.

Answer 4

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/

Answer 5

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/