CODEWITHSUNDEEP
javascriptjquery
Tom
Tom

Reputation: 9643

JQuery change class by given id's

I have a number of tables, for example:

<table class="onion" id="12">

When a div named "Mark_Pre_Val" gets clicked i want tables with the id's 4, 6, 12 & 21 to change their class to "onionClick", and if one of them is already "onionClick" then don't change the class.

Here is the click event:

    $(".Mark_Pre_Val").click(function(){       });

Can someone point me to the right direction how to approach this?

Upvotes: 18

Views: 38126

Answers (4)

Jeroen
Jeroen

Reputation: 1

$('#4, #6, #12, #21').toggleClass('onionClick');

Upvotes: -1

Code Maverick
Code Maverick

Reputation: 20415

$("#Mark_Pre_Val").click(function(){

    $("#4,#6,#12,#21")
        .not("onionClick")
        .removeClass("onion")
        .addClass("onionClick");

});

EDIT:

None of the above answers are going to work as the click event will never be fired if you are selecting the class .Mark_Pre_Val. You said your div was named Mark_Pre_Val, so you need to use # when selecting. Also ... why not use not() to immediately filter those that don't have the class you want to change to, then remove the old class, and finally add the new class?

Upvotes: 3

cantlin
cantlin

Reputation: 3226

$(".Mark_Pre_Val").click(function(){ 
  $('#4, #6, #12, #21').removeClass('onion').addClass('onionClick');
});

Edit: as others have pointed out, element ID's should not contain only numbers. If you are outputting these tables in a loop and using the ID as an iterator, you may find it more elegant to use index().

Upvotes: 28

Enrique Moreno Tent
Enrique Moreno Tent

Reputation: 25237

Dont put ID's that start with number, please.


$(".Mark_Pre_Val").click(function(){
    $("#4, #6, #12, #21").removeClass("onion").addClass("onionClick");
});

Upvotes: 4

Related Questions