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
Prakhar Patwa
11,260 PointsI am not clear with the $image.attr("src" , imageLocation); please anybody can explain?
$image.attr("src" , imageLocation); //don't understand we have used this?
4 Answers
Erik McClintock
45,783 PointsPrakhar,
The .attr() method can either get or set the value of the given attribute, depending on if you pass one or two arguments to it when you call it. To retrieve (get) the value of a given attribute, you simply pass the name of the attribute that you wish to get said value from. To set the value of a given attribute, you first pass the name of the attribute that you wish to set, and then secondly, you pass in the value that you wish to set that attribute to.
So, in the code that Andrew writes, he first creates a variable called imageLocation, then uses the .attr() method to get the value of the href attribute from the link that was clicked and store it:
// create a variable called imageLocation
// then use the .attr() method on the link that was clicked to run this code (i.e. $(this)), and pass in the 'href' attribute, since you want to get the value stored in that attribute
var imageLocation = $(this).attr('href');
Then, in the line that you're questioning, he again uses the .attr() method, but this time to SET the value of the src attribute on the image equal to the value stored in the imageLocation variable.
// use the .attr() method on $image, and pass in two values to SET the value of the $image's src attribute (first telling .attr() which attribute you wish to set, and then passing in the value stored in the imageLocation variable)
$image.attr("src" , imageLocation);
Does that help to explain it at all? You can check out the documentation that I linked to above for more information and some other examples.
Erik
Prakhar Patwa
11,260 Pointsthnkx. But why we have updated the link?
Erik McClintock
45,783 PointsPrakhar,
You're not updating a link, you're taking a value from an attribute on the link that you clicked.
Erik
Prakhar Patwa
11,260 Pointsokay now got it. thnkx
Pavlo Kochubei
15,009 PointsErik McClintock, maybe you could also explain why, when appending to image element,
$image.attr("src", href)
we only append it to the img tag in the overlay and not all the other img tags we have in the DOM?
I might be missing something obvious, but we could use the
$("img").attr.("src", href);
only then, all the images change their src to the clicked image. I just can't get it, because our $image stands for img.
Thanks.
Erik McClintock
45,783 PointsPavlo,
The reason it doesn't apply the change to all the images in the DOM is because our $image variable is actually not referencing the images that exist in the DOM; it is set to a NEW image element that does NOT exist in the DOM until we append it to the overlay that we click. The difference is in the syntax used, i.e. the angled brackets surrounding the tag name:
var $image = $('img') // this is SELECTING all image tags on the page
var $image = $('<img>') // this is CREATING an image tag to be added to the page at your discretion
So we are creating an image tag to use as we please, which in this case, is to append it to our $overlay element, and then fill its src and alt attributes dynamically based on the link that we clicked.
Hope this helps to clarify a little bit further.
Erik
Pavlo Kochubei
15,009 PointsThanks Erick! I'm processing it:)
Teo Manetti
7,411 PointsTeo Manetti
7,411 PointsSo in the first example he's basically taking the "href" value meanwhile in the second example he's putting the taken value inside the "src" value, am I right?!