jQuery attr(“src”) returning undefined

Question

I'm trying to grab the source of an image using jQuery. However, when I log the result, it returns undefined. Here is my code:

 $(document).ready(function() { $(".btn-expand").on("click", function() { var img = $(".img-" + "num" + " img").attr("src"); console.log(img); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="row"> <div class="col-md-12 img-banner img-2"> <img src="assets/img/placeholder-banner.png" alt="Banner 2"> <div class="overlay overlay-2"> <div class="overlay-contents"> <h2>Name2</h2> <h3>Caption2</h3> <a href="" class="btn-expand" overlay-data="2">View</a> </div> </div> </div> </div> 

Answer 1

$(".img-" + "num" + " img")

is exactly equivalent to

$(".img-num img")

I believe you meant "num" to be a variable called num whose value is the number of the target image, not a hard-coded string:

 $(document).ready(function() { $(".btn-expand").on("click", function(event) { var num = $(event.currentTarget).attr('overlay-data') var img = $(".img-" + num + " img").attr("src"); console.log(img); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="row"> <div class="col-md-12 img-banner img-2"> <img src="assets/img/placeholder-banner.png" alt="Banner 2"> <div class="overlay overlay-2"> <div class="overlay-contents"> <h2>Name2</h2> <h3>Caption2</h3> <a href="#" class="btn-expand" overlay-data="2">View</a> </div> </div> </div> </div> 

Answer 2

Well you have an attribute on the anchor you do not read. Change it to be a data attribute and use a variable instead of hardcoding a string.

 $(document).ready(function() { $(".btn-expand").on("click", function (e) { e.preventDefault() var overlay = $(this).data("overlay") var img = $(".img-" + overlay + " img").attr("src"); console.log(img); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="row"> <div class="col-md-12 img-banner img-2"> <img src="http://via.placeholder.com/350x150" alt="Banner 2"> <div class="overlay overlay-2"> <div class="overlay-contents"> <h2>Name2</h2> <h3>Caption2</h3> <a href="#" class="btn-expand" data-overlay="2">View</a> </div> </div> </div> </div> 

Answer 3

Everything looks good except that the attribute value wasn't defined. To set an attribute in jQuery, you must set the value. Hence, to correct that snippet.

 $(document).ready(function() { $(".btn-expand").on("click", function(event) { var num = $(event.currentTarget).attr('overlay-data') var img = $(".img-" + num + " img").attr("src"); console.log(img); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="row"> <div class="col-md-12 img-banner img-2"> <img src="assets/img/placeholder-banner.png" alt="Banner 2"> <div class="overlay overlay-2"> <div class="overlay-contents"> <h2>Name2</h2> <h3>Caption2</h3> <a href="#" class="btn-expand" overlay-data="2">View</a> </div> </div> </div> </div> 

 $(document).ready(function() { $(".btn-expand").on("click", function(event) { var num = $(event.currentTarget).attr('overlay-data') var img = $(".img-" + num + " img").attr("src","imageSource.extention"); console.log(img); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="row"> <div class="col-md-12 img-banner img-2"> <img src="assets/img/placeholder-banner.png" alt="Banner 2"> <div class="overlay overlay-2"> <div class="overlay-contents"> <h2>Name2</h2> <h3>Caption2</h3> <a href="#" class="btn-expand" overlay-data="2">View</a> </div> </div> </div> </div> 

Answer 4

var img = $(".img-" + "num" + " img").attr("src");

in this code you are looking for tag with class "im-num" and child with class "img" . if you give class im-num to outer div and class img like below

<div class="col-md-12 img-banner img-2 im-num">
     <img src="assets/img/placeholder-banner.png" alt="Banner 2" class='img'/>
</div>