CODEWITHSUNDEEP
jqueryfunctionparent
user1502434
user1502434

Reputation: 97

Selecting parent of $(this) within function call

I have an issue selecting the parent of $(this) when I call a function. When I select the little 1 buttons, the buttons toggle as only one can be selected. I have a function call to set the Big button as well. I know I can set the state of the big button without calling a function however this is just the beginning of more reqs.

I thought adding the $(this).parent().prev().addClass('big_selected'); would do the trick however its not working for me, any suggestions on how to capture the element of the Big buttons and adding the specified class?

See demo here... http://jsfiddle.net/froze1906/aSyUE/1/

Upvotes: 0

Views: 150

Answers (2)

wirey00
wirey00

Reputation: 33661

This is all you need to accomplish what you want

$(':button[class*=small]').click(function(){ // <-- on all small button clicks
    $(this).parent().prev().addClass('big_selected'); // < -- add big class to closest big button
    $(this).addClass('small_selected'); // <-- add class to current clicked
    $(':button[class*=small]').not(this).removeClass('small_selected'); // <-- remove class from all but current clicked
    $(':button[class*=small]').not($(this).siblings().andSelf()).parent().prev().removeClass('big_selected'); // <-- remove class from Big that is not closest to current clicked
});

http://jsfiddle.net/aSyUE/3/

Upvotes: 0

MrOBrian
MrOBrian

Reputation: 2189

What worked for me in your fiddle is changing:

setBig();

to:

setBig.call(this);

So that in the setBig function, this is the button that was clicked.

Your setBig function has an argument of evt, but you never use it. If you need to pass it, call your function as:

setBig.call(this, evt);

Also, you have two elements with the same id. Element ids are supposed to be unique.

Upvotes: 2

Related Questions