jquery - Undefined src when using attr() of image

Question

Just learning jQuery. What I want is to grab the src of the image and display it in a fixed division, kind of like a pop up, with the title of the image. But I'm stuck at getting the src of the image.

When I tried using the .attr(), its giving me undefined.

HTML:

 <div id="album"> <div class="pic"> </div> <div class="screen"> <h1 class="title">Photo 1</h1> <img src="images/1 png.png" class="image" /> <p class="description">This is a description</p> </div> <div class="screen"> <h1 class="title">Photo 1</h1> <img src="images/1 png.png" class="image" /> <p class="description">This is a description</p> </div> <span class="clear_left"></span> </div>

css:

.screen { border: 1px solid green; margin: 10px auto; float: left; cursor:pointer } .image { width: 300px; } .title { font-size: 30px; } .description { font-size: 25px; } .pic { width: 600px; position:fixed; }

js:

$(document).ready(function () { $(".pic").hide(); $(".screen").click(function () { display(); }); }); function display() { var source = $("img",this).attr("src"); alert("The souce of the image is " + source); }

karthikr · Accepted Answer · 2013-10-23 20:22:24Z

The problem is, the display() method does not have the context of the element being clicked. Hence it is showing undefined

So, try this:

$(document).ready(function () { $(".pic").hide(); $(".screen").click(function () { display($(this)); }); }); function display($this) { var source = $("img", $this).attr("src"); alert("The souce of the image is " + source); }

Working demo

Thanks it worked! How do I pass this src and display it in the div (.pic)? I have added $('.pic').show();, but I don't know how to pass the src to display the image and its description in the .pic div.
That is simple: This post should help you:stackoverflow.com/questions/8013792/…

tymeJV · Accepted Answer · 2013-10-23 20:24:35Z

Dont wrap your function call with another anonymous function:

Demo: http://jsfiddle.net/9KgSQ/

$(".screen").click(display);

This will now pass along this to your function.

earl3s · Accepted Answer · 2013-10-23 20:23:23Z

this in the display function is referring to your anonymous function, not the element. You don't need to wrap it. $('.screen').click(display) will make sure that this references the .screen element.

I would also change display to do this instead:

function display() { var source = $(this).find('img').attr('src'); alert("The source of the image is " + source); }

This wraps jQuery around the .screen element that was clicked on and finds the img element inside of it. I think it's a little more clear, but this is just a preference thing.

David Sherret · Accepted Answer · 2013-10-23 20:28:10Z

It's because the value of this in display is not the same as the value of this in the click function for .screen. You can do a test for that by calling console.log(this); within the display function to see what the value of this is.

If you want to pass the value of this on to display you can use the call function like so:

$(document).ready(function () { $(".pic").hide(); $(".screen").click(function () { display.call(this); }); }); function display() { var source = $("img", this).attr("src"); alert("The souce of the image is " + source); }

Or you could completely get rid of the anonymous function and pass in display directly:

$(".screen").click(display);

slickrick · Accepted Answer · 2015-07-27 19:25:02Z

It's because your src IS undefined.

function display() { var source = $("img",this).attr("src", "images/okay.jpg"); alert("The souce of the image is " + source); }

Collectives™ on Stack Overflow

jquery - Undefined src when using attr() of image

5 Answers 5

2 Comments

Comments

1 Comment

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

2 Comments

Comments

1 Comment

Comments

Comments

Linked

Related