[jQuery] Figure out which img in a div was clicked?
Glen and Matt, thanks for your responses!
I've spent a bunch of time on this tonight and managed
to get a working solution, though I'm hoping to tweak
it a little now.
(url for a refresher... note, i've been working off a
different page now, so these new changes aren't up. At
least this will show you the div structure:
http://anime-planet.com/newsite/anirec/5.html )
Expected behavior:
-click any button while no dropdowns are visible:
dropdown associated with button lowers.
-click the SAME button once the dropdown is visible:
dropdown hides.
-click a DIFFERENT button once the first dropdown is
visible: first dropdown raises, and new dropdown
associated with new button lowers.
I decided the best way to do this, since I don't want
to preload all of the info that will be in these
dropdowns, was to use the same div (.anirec_more) and
simply use ajax or something else to populate it
depending on what you click (haven't done this part
yet).
I got #1 and 3 done, but can't get #2 to work. Here's
what I have (I know it's incorrect):
$('div.anirec_buttons img').click(function() {
if
($(this).parents('div.anirec_main').next().is(":visible"))
{
$(this).parents('div.anirec_main').next().slideUp(400);
if
($(this).parents('div.anirec_main').parent().is(":"+$(this).attr("id")))
{
//Not sure how to do a "is not" function in jquery,
or i'd structure it that way
}
else
{
$(this).parents('div.anirec_main').next().slideDown(400);
$(this).parents('div.anirec_main').parent().addClass($(this).attr("id"));
}
}
else
{
$(this).parents('div.anirec_main').next().slideToggle(400);
$(this).parents('div.anirec_main').parent().addClass($(this).attr("id"));
}
return false;
});
My reasoning: since the outermost div of each series
entry has no class, I could append a class to it
matching the id of the clicked button. Then, I could
compare the currently clicked button's ID with
whatever the dropdown div's outermost parent has a
class set as. If they match, don't slidedown the new
div or give a new class name to the div. If they don't
we know a new button has been clicked and must act
accordingly.
Any ideas on how I could make that happen? I tried out
the code above and it's not working right.
My only other question is related to settimeout; I
want a second or two delay before the second dropdown
comes down, but am not sure how to pass the this
object into another function, to pass to settimeout.I
could probably post this in a different thread. :)
thanks,
-kim
--- Glen Lipka <glen@kokopop.com>