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!
+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
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments