Javascript onclick関数のパスimg src

Question

私にはそれぞれonclickとパラメータが渡された3つの画像があります。ここでは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渡されたパラメータのimgsrc値を取得する機能を持っています。したがって、たとえば：

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

どうすればいいですか？

Answer 1

あなたはクリックdiv要素への参照になります関数のパラメータとしてthisを渡すことができます。その後、子をimgにし、src属性を読み取ることができます。

しかし、はるかに良い解決策は、古いイベントハンドラを使用することです。on*イベント属性。あなたのimgタグにid属性を追加し、それらをあなたのidパラメータを与える

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

それぞれのdiv画像のオンチップは、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'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>

Answer 3

：これを試してみてください。

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

スクリプトでは、jQueryを使用してフェッチできます。

myFunction(id) { 

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

} 

ただし、これを達成するための複数の方法があります。

Answer 4

onclick属性を使用すると、現在の要素を表すmyfunctionにthisキーワードを渡して、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>

あなたは望ましい結果を達成できるにもかかわらず、Javascriptのためonclick属性を使用するこの方法は良い習慣ではありません。 JavaScriptの開発者は、常に別のファイルに完全にjavascriptを置くことをお勧めします。

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