Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by Konrad Pilch
Konrad Pilch
2,435 Points

How can i get the h3 and the p?

SO if you look here

When click, i got the image, but how do i get the h3 and the p?

2 Answers

Paul Cox
Paul Cox
12,671 Points

You need to select the correct h3 and p elements based on the current anchor that is being clicked. The h3 and p elements are siblings of the anchor. Something like this.

$('#imageGallery a').click(function(event){
  event.preventDefault();

  var $imageLoad = $(this).attr('href');
  $image.attr('src', $imageLoad);

  var heading = $(this).siblings('h3').text();
  var description = $(this).siblings('p').text();

  $heading.text(heading);
  $description.text(description);

  $overlay.fadeIn();

});
Steven Parker
Steven Parker
243,656 Points
Steven Parker
Steven Parker
243,656 Points

In your code, you have this:

  var $title = $( "h3" ).attr( "h3" );
  $(this).text($heading);

It looks like you're trying to get the h3 attribute from the h3 element (it doesn't have one). Then, you ignore that variable and stuff the empty heading tag into the text of the clicked item.

What you probably intended was perhaps more like this:

  var $title = $(this).siblings("h3").text();
  $heading.text($title);

And that "mouse" is actually a hamster.

Konrad Pilch
Konrad Pilch
2,435 Points

Thank you . Aha, so attr is attributes in the html, and text is h3, or p and so on.

How i ment to find this in the documentation? Iv been lookign for this and i can't get my head around the docs.

Konrad Pilch
Konrad Pilch
2,435 Points

Hmm, strange bug is there. Each time i click it, it adds Mouse, or the h3 tag, so if i click 10times the image, the h3 will be stored and showed there.

Steven Parker
Steven Parker
243,656 Points
Steven Parker
Steven Parker
243,656 Points

The heading is also an h3, so on the next click it picks up 2, then 3, etc.

You probably want to use the sibling selector to get only the h3 associated with the anchor. I revised my suggestion above.

I see Paul went ahead and hooked up the description for you also. I was thinking you'd probably figure that out for yourself after you saw how to fix the heading.