18

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?

Tom
  • 9,275
  • 25
  • 89
  • 147
  • 1
    usually you're not allowed to have ID that is only numeric – Teneff Apr 05 '11 at 14:36
  • 1
    ids should not begin with a number. http://stackoverflow.com/questions/70579/what-are-valid-values-for-the-id-attribute-in-html – epascarello Apr 05 '11 at 14:37
  • 1
    did you want to add onionClick, or chance onion to onionClick. if you want to change it, you need to do a .removeClass('onion').addClass('onionClick'); otherwhise, all the answers below are correct. – Patricia Apr 05 '11 at 14:39

4 Answers4

28
$(".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().

cantlin
  • 3,236
  • 3
  • 21
  • 22
4

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


$(".Mark_Pre_Val").click(function(){
    $("#4, #6, #12, #21").removeClass("onion").addClass("onionClick");
});
Enrique Moreno Tent
  • 24,127
  • 34
  • 104
  • 189
  • why detect if "onionClick" already is set? the method "addClass probably does this already. – Enrique Moreno Tent Apr 05 '11 at 14:36
  • Also, none of the above CHANGE the class. They just add a new one. – Enrique Moreno Tent Apr 05 '11 at 14:43
  • The jQuery docs specifically says, addClass() "simply adds the class, appending it to any which may already be assigned to the elements." I'm not sure if having duplicate classes is an error, but it shouldn't be correct. – James An Apr 05 '11 at 14:43
  • Pretty sure this method wont duplicate your classes in the element – Enrique Moreno Tent Apr 05 '11 at 14:48
  • Just tested it. You're right. addClass() doesn't duplicate classes even though the documentation doesn't guarantee this. Inspecting the code, addClass() does loop through the existing classes to prevent any existing ones from being added again. – James An Apr 05 '11 at 14:53
  • And I still get less points that the ones that forget to delete the "onion" class. =DDDD StackOverflow doesn't luw me :D – Enrique Moreno Tent Apr 05 '11 at 15:53
3
$("#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?

Code Maverick
  • 20,171
  • 12
  • 62
  • 114
  • The `not()` is unnecessary, `addClass()` will do nothing if the class is already present (just as `removeClass()` will fail silently if no such class is found). – cantlin Apr 05 '11 at 21:19
  • You are correct. I just tested it. Weird, I had read somewhere that it kept adding the class. Although, you'd think that the jQuery API team would put that in their documentation, as it's a rather important side note. – Code Maverick Apr 06 '11 at 04:19
-1

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

Jeroen
  • 1
  • Please add more information to your answer - make sure that you explain the code provided. Also, the user needs this to happen `onclick` which seems to be missing from your code snippet. – Frits May 11 '16 at 13:56