0 Replies - 366 Views - Last Post: 09 January 2010 - 09:07 PM

#1 itpro4470  Icon User is offline

  • D.I.C Head
  • member icon

Reputation: 5
  • View blog
  • Posts: 156
  • Joined: 17-June 07

jQuery selectors[SOLVED]

Posted 09 January 2010 - 09:07 PM

I'm learning jQuery and want to use it on my site. I'm having a hard time with selecting the correct items to show and hide. I'm just looking for some direction here. I have been through all of the tutorials on jquery.com site but I'm still not there.

My site has a dynamically loaded image gallery in this pattern

<table>
<tr><td>Main Photo</td></tr>
<tr><td>description</td></tr>
</table>
<table>
<tr><td>sub photo</td><td>subphoto</td></tr>
<tr><td>sub photo</td><td>subphoto</td></tr>
...



The photos are constantly changing I coded a page in asp.net to load the photos in a particular location and this page pulls those photos from that location.

I want to show only the main photos with their description then when a user clicks on the photo only the sub photos of that main photo come down. I'm about half way there. My code does hide the subphotos but loads all of the subphotos when I click on a main photo. heres my code.

$(document).ready(function() {
		$("table:odd").hide();
		$("img").click(function(e) {
				$("table:odd").show(); <---how do I only select the next table on the page?
			}
		});
	});



I have done a lot of trial and error with the .next() and .parent() functions but I have had no luck.. please help



SOLUTION:

Got it to work by moving the click event to the table and using the .next()

$(document).ready(function() {
		//Hide all tables on load
		$("table:odd").hide();

					 //When a table is clicked 
		$("table").click(function(e) {
													//Hide all of the odd tables								$("table:odd").hide();
													//Show the next table
			$(this).next().show(); 
		}
	});
});


This post has been edited by itpro4470: 10 January 2010 - 02:25 PM


Is This A Good Question/Topic? 1
  • +

Page 1 of 1