जावास्क्रिप्ट ऑनक्लिक फ़ंक्शन पास img src

Question

मेरे पास 3 छवियां हैं जिनमें प्रत्येक के पास onclick है और एक पैरामीटर पास हो गया है। यहाँ एचटीएमएल है:

<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* ईवेंट विशेषताओं पर अविभाज्य ईवेंट हैंडलर का उपयोग करने के लिए एक बेहतर समाधान होगा। इस प्रयास करें:

$('.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 के ऑनलिक छवि स्रोत 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 टैग करने के लिए एक आईडी गुण जोड़ें और उन्हें अपने आईडी पैरामीटर दे।

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

भले ही आप इच्छित परिणाम प्राप्त कर सकते हैं, जावास्क्रिप्ट के लिए onclick विशेषताओं का उपयोग इस तरह एक अच्छा अभ्यास नहीं है। जावास्क्रिप्ट डेवलपर्स आपको सलाह देते हैं कि आपको हमेशा एक अलग फ़ाइल में जावास्क्रिप्ट को पूरी तरह से रखना चाहिए।

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