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>

我需要做的是获得一个函数，该函数获取img传递参数的src myfunction值。例如：

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>

Answer 2

各个divs image src的Onlcick可以使用var imgSrc = "assets/placeholders/sliders/slider" + id + ".png";获取，并且可以根据需要使用它。

请查看工作片段。

＆＃13;

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 );

}

＆＃13;

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

＆＃13;

Answer 3

使用onclick属性，您可以在代表当前元素的this中传递myfunction关键字，然后查找src属性。

＆＃13;

function myfunction(e){
var src = $(e).find('img').attr('src');
alert(src);
}

＆＃13;

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

＆＃13;

即使你可以达到预期的结果，这种使用Javascript onclick属性的方法也不是一个好习惯。 Javascript开发人员建议您始终将javascript完全放在单独的文件中。

＆＃13;

$(document).ready(function(){
$('.thumbnail').on('click', function(){
var src = $(this).find('img').attr('src');
alert(src);  
})
});

＆＃13;

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

＆＃13;

Answer 4

为您的img标记添加id属性，并为其提供您的id参数。

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

在您的脚本中，您可以使用jQuery获取它们。

myFunction(id) {

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

}

然而，有多种方法可以实现这一目标。

Javascript onclick函数传递img src

4 个答案: