Jump to content

jQuery - selecting elements of same class as 'clicked' item


Recommended Posts

Hey All, I'm jumping back into some web design to update personal site (I usually do camera and computer effects so this is always liking diving back into a 12-foot pool at first).I was wondering how to script a jQuery selector so that it would select all other elements in the document that matched that specific class of the object that was clicked. The purpose is to click on a little mini-thumbnail in a slide that would bring up a "gallery widget" with the appropriate photo enlarged and its respective thumbnail in the widget highlighted, rather than just uploading the first in the set. The elements being selected are in an entirely different div/list so they can't be considered children.Do I need to use a variable? If so how (terrible with that part)?All help is greatly appreciated. Thanks! Jared Also, this wont be an issue with other classes being attached, will it?

Link to post
Share on other sites

Are you just trying to get one other element when you click on a thumbnail, or a collection? It shouldn't be much to create an event handler for the desired elements that gets the class name of the element clicked, and then uses that value in the jquery select to get all other matching elements. i.e.

$(img).bind('click', function(){  var className = $(this).attr('class');  var allElems = $('".' + className + '"').not(this);});

that's off the top of my head, but something simple like that might work. I'm not sure if the not part will work like I think it will, but can't hurt to try.

Link to post
Share on other sites

Thanks, scientist. Since I posted this my chops have gotten back up to specs and while I haven't quite gotten to this part of the site design, that does look like it'd do it. As it turns out, What I think I'll end up doing is something like this:

$('.thumb.slide').click(function(){	 var clickedItem = $(this).attr('name');	 $('.widget').show(500, function(){		  $('.thumb.widget [name=clickedItem]').addClass('.active');	 };});

At least I hope that'll work. I'm still iffy on whether I can shove a variable within a selector or effect (getting an element's width and using it to, say .animate({left: 'var'}); - Or am I way off the map on this structure here? If there's a generally efficient (i.e. easy-to-type-and-understand) protocol for this, much appreciated!

Link to post
Share on other sites

you have to add a gap between class names$('.thumb.slide')should be$('.thumb .slide')to add a class.addClass('.active');should be.addClass('active');Are the images you click supposed to represent some sort of category of images? usually you would give these a unique id ref to represent a specific category, then use this to target images that relate to this category whose class name would be the same as the id ref, IF not! just change var clickedItem = $(this).attr('id'); to var clickedItem = $(this).attr('name');

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Untitled Document</title><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/jquery-ui.min.js"></script><script type="text/javascript">/*<![CDATA[*//*---->*/$(document).ready(function(){$('.thumb .slide').click(function(){	    var clickedItem = $(this).attr('id');  $('.thumb .widget img').hide();  $('.thumb .widget img').removeClass('active');  $('.thumb .widget img').eq(0).attr('src', ($(this).attr('src').replace('_thumb', '')))  $('.thumb .widget img[src="'+$(this).attr("src")+'"]').addClass('active');  $('.thumb .widget img').eq(0).show(500, function(){  $('.thumb .widget img.'+clickedItem).show();   });});});/*--*//*]]>*/</script><style type="text/css">.widget img {display:none;}.widget img.active {border:2px solid #fb7d1e;}</style></head><body><div class="thumb"><img class="slide" id="a1" src="../ovtesting/tabmenu/images/imgview1_thumb.jpg" /><img class="slide" id="b1" src="../ovtesting/tabmenu/images/imgview2_thumb.jpg" /><img class="slide" id="c1" src="../ovtesting/tabmenu/images/imgview3_thumb.jpg" /><img class="slide" id="d1" src="../ovtesting/tabmenu/images/imgview4_thumb.jpg" /></div> <div class="thumb"><div class="widget"><img src="../ovtesting/tabmenu/images/imgview1.jpg" /><img class="a1" src="../ovtesting/tabmenu/images/imgview1_thumb.jpg" /><img class="a1" src="../ovtesting/tabmenu/images/imgview2_thumb.jpg" /><img class="a1" src="../ovtesting/tabmenu/images/imgview3_thumb.jpg" /><img class="a1" src="../ovtesting/tabmenu/images/imgview4_thumb.jpg" /><img class="b1" src="../ovtesting/tabmenu/images/imgview1_thumb.jpg" /><img class="b1" src="../ovtesting/tabmenu/images/imgview2_thumb.jpg" /><img class="c1" src="../ovtesting/tabmenu/images/imgview3_thumb.jpg" /><img class="c1" src="../ovtesting/tabmenu/images/imgview4_thumb.jpg" /><img class="c1" src="../ovtesting/tabmenu/images/imgview1_thumb.jpg" /><img class="d1" src="../ovtesting/tabmenu/images/imgview2_thumb.jpg" /><img class="d1" src="../ovtesting/tabmenu/images/imgview3_thumb.jpg" /><img class="d1" src="../ovtesting/tabmenu/images/imgview4_thumb.jpg" /></div></div></body></html>

Link to post
Share on other sites

dsonesku: I don't put spaces between classes because I've been compounding classes to style and select different groups in my style sheet and the script. It's my understanding that a space implies that it would select all thumbs and all gallery items. I use these compound classes to differentiate between thumbs in one menu and thumbs in another.Forgive my ignorance but to be sure, you're using that last line: $('.thumb .widget img.'+clickedItem).show(); to select the appropriate id based off the variable, yes? If so, that's really the part I needed. The rest of the script looks like it's set up for an indexed 'next/previous' type function, am I right?

Link to post
Share on other sites

$('.thumb .widget img').eq(0) is used to target the first child img in the widget container, this will always be used to show the normal/larger image, by using replace() to strip '_thumb' from the src of the thumbnail image.$('.thumb .widget img[src='+$(this).attr("src")+']').addClass('active'); identifies which thumbnail image within widget container that has identical src, and applies 'active' classname.var clickedItem = $(this).attr('id'); retrieves unique id ref of clicked image, and stores in variable clickedItem. $('.thumb .widget img.'+clickedItem).show(); shows all images with CLASS name that matches id ref of selected image passed to it through variable clickedItem The other functions are mainly used to remove active class, and hide the images currently showing, for the new selection.

space implies that it would select all thumbs [i]and [/i]all gallery items

??? '.thumb .slide' will target all elements with 'slide' classname whose parent container element classname equals 'thumb', any other elements with classname 'slide' whose parent classname does not match 'thumb' will be ignored. Edited by dsonesuk
Link to post
Share on other sites

If I'm correct, this would accomplish the same task as well, right?

$('.slide.thumb').click(function(){     var clickedItemID = $(this).attr('id');     $('widget.thumb'+clickedItemID, '.lrgImage'+clickedItemID).addClass('.active');});

After the slide thumb is clicked the widget z-indexes over the slide element and they are thus irrelevant, so needing to strip the '.slide' class seems unnecessary. There any reason why the above code would be disagreeable?

Edited by Jared
Link to post
Share on other sites
so needing to strip the '.slide' class seems unnecessary
Well it depend on how you have it set up? as I just read it, the slide show thumb once clicked shows large image and relative thumbnail image selected as active, and this active thumbnail is one of many? yes! But! if you were to click any of these other wdget thumbnail images, they would also become active, and not revert to normal state unless removed? unless that is what you want to identify images already viewed, then that's OK!
Link to post
Share on other sites

You are right about needing to remove active once going through other thumb widgets. I didn't it in my sample, but I intend to .focus the respective widget elements upon becoming '.active' and a function for .blur() to removeClass. That way when you click the next thumb it will automatically toggle the '.active' class appropriately. I read that if you insert the tabindex attribute into the elements it will enable this focus/blur ability on just about any element.This'll also end up being really useful if I decide to add previous/next buttons within the widget to toggle classes in order of the index. Thanks for the help. Realizing how to put variables in the middle of strings was critical and I figured there was some way!

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...