12

I have 3 images which each have an onclick and a parameter passed. Here's the HTML:

<div class="row">
  <div class="col-md-12 thumb">
    <div class="thumbnail" onclick="myfunction(1);">
      <img class="img-responsive" src="assets/placeholders/sliders/slider1.png" alt="" />
    </div>
  </div>
</div>
<div class="row">
  <div class="col-md-12 thumb">
    <div class="thumbnail" onclick="myfunction(2);">
      <img class="img-responsive" src="assets/placeholders/sliders/slider2.png" alt="" />
    </div>
  </div>
</div>
<div class="row">
  <div class="col-md-12 thumb">
    <div class="thumbnail" onclick="myfunction(3);">
      <img class="img-responsive" src="assets/placeholders/sliders/slider3.png" alt="" />
    </div>
  </div>
</div>

What I need to do is have a function which gets the img src value of the myfunction passed parameter. So for example:

myFunction(id) {
    $('body').html(/* passed parameter's img src here */);    
}

How can I do this?

Improve this question
1
  • Do you want to pass the img src as body background? Commented Nov 2, 2016 at 8:51

4 Answers 4

Reset to default
12

You can pass this as a parameter to the function which will be a reference to the clicked div element. You can then get the child img and read the src attribute.

However a much better solution would be to use unobtrusive event handlers over outdated on* event attributes. Try this:

$('.thumbnail').click(function() {
  var $thumb = $(this);
  console.log($thumb.data('foo'));
  console.log($thumb.find('img').attr('src'));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
  <div class="col-md-12 thumb">
    <div class="thumbnail" data-foo="1">
      <img class="img-responsive" src="assets/placeholders/sliders/slider1.png" alt="" />
    </div>
  </div>
</div>
<div class="row">
  <div class="col-md-12 thumb">
    <div class="thumbnail" data-foo="2">
      <img class="img-responsive" src="assets/placeholders/sliders/slider2.png" alt="" />
    </div>
  </div>
</div>
<div class="row">
  <div class="col-md-12 thumb">
    <div class="thumbnail" data-foo="3">
      <img class="img-responsive" src="assets/placeholders/sliders/slider3.png" alt="" />
    </div>
  </div>
</div>

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

3

Onlcick of respective divs image src can be get using var imgSrc = "assets/placeholders/sliders/slider" + id + ".png"; and it can be used as per need.

Please check working snippet.

function myfunction(id) {
  //Get image src on click on the respective divs
  var imgSrc = "assets/placeholders/sliders/slider" + id + ".png";
  console.log(imgSrc);
  //$('body').html( passed parameter's img src here );

}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
  <div class="col-md-12 thumb">
    <div class="thumbnail" onclick="myfunction(1);"><img class="img-responsive" src="assets/placeholders/sliders/slider1.png" alt="" /></div>
  </div>
</div>
<div class="row">
  <div class="col-md-12 thumb">
    <div class="thumbnail" onclick="myfunction(2);"><img class="img-responsive" src="assets/placeholders/sliders/slider2.png" alt="" /></div>
  </div>
</div>
<div class="row">
  <div class="col-md-12 thumb">
    <div class="thumbnail" onclick="myfunction(3);"><img class="img-responsive" src="assets/placeholders/sliders/slider3.png" alt="" /></div>
  </div>
</div>

Improve this answer

Comments

2

Add an id attribute to your img tags and give them your id parameter.

<img id="1" ... />
<img id="2" ... />
<img id="3" ... />

In your script you can fetch them with jQuery.

myFunction(id) {

  var src = $('#' + id).attr('src');
  $('body').html(src);

}

However, there multiple ways to achieve this.

Improve this answer

Comments

2

Using onclick attribute you can pass this keyword in myfunction which represents the current element, and then look for the src attribute.

function myfunction(e){
var src = $(e).find('img').attr('src');
alert(src);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
  <div class="col-md-12 thumb">
    <div class="thumbnail" onclick="myfunction(this);"><img class="img-responsive" src="assets/placeholders/sliders/slider1.png" alt="" /></div>
  </div>
</div>
<div class="row">
  <div class="col-md-12 thumb">
    <div class="thumbnail" onclick="myfunction(this);"><img class="img-responsive" src="assets/placeholders/sliders/slider2.png" alt="" /></div>
  </div>
</div>
<div class="row">
  <div class="col-md-12 thumb">
    <div class="thumbnail" onclick="myfunction(this);"><img class="img-responsive" src="assets/placeholders/sliders/slider3.png" alt="" /></div>
  </div>
</div>

Even though you can achieve the desired outcome, this way of using onclick attributes for Javascript is not a good practice. Javascript developers recommend you should always put javascript entirely in a separate file.

$(document).ready(function(){
$('.thumbnail').on('click', function(){
var src = $(this).find('img').attr('src');
alert(src);  
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
  <div class="col-md-12 thumb">
    <div class="thumbnail" ><img class="img-responsive" src="assets/placeholders/sliders/slider1.png" alt="" /></div>
  </div>
</div>
<div class="row">
  <div class="col-md-12 thumb">
    <div class="thumbnail" ><img class="img-responsive" src="assets/placeholders/sliders/slider2.png" alt="" /></div>
  </div>
</div>
<div class="row">
  <div class="col-md-12 thumb">
    <div class="thumbnail" ><img class="img-responsive" src="assets/placeholders/sliders/slider3.png" alt="" /></div>
  </div>
</div>

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.