Функция javascript onclick pass img src

У меня есть 3 изображения, каждая из которых имеет onclick и переданный параметр. Здесь 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>

Мне нужно выполнить функцию, которая получает значение img src переданного параметра myfunction. Так, например:

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

Как я могу это сделать?

Ответ 1

Вы можете передать this в качестве параметра функции, которая будет ссылкой на щелкнутый элемент div. Затем вы можете получить дочерний элемент img и прочитать атрибут src.

Однако гораздо лучшим решением было бы использовать ненавязчивые обработчики событий по устаревшим атрибутам событий on*. Попробуйте следующее:

$('.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>

Ответ 2

Onlcick соответствующего divs image src можно получить с помощью var imgSrc = "assets/placeholders/sliders/slider" + id + ".png";, и его можно использовать по мере необходимости.

Пожалуйста, проверьте рабочий фрагмент.

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 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>

Ответ 3

Используя атрибут onclick, вы можете передать ключевое слово this в myfunction, которое представляет текущий элемент, а затем найдите атрибут src.

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>

Ответ 4

Добавьте атрибут id в теги img и укажите им свой параметр id.

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

В вашем script вы можете получить их с помощью jQuery.

myFunction(id) {

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

}

Однако существует несколько способов достижения этого.