Javascript onclick 函数传递 img src

Question

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

我需要做的是有一个函数来获取 myfunction 传递参数的 img src 值。例如:

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

我该怎么做？

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