auf Text klicken Sie auf Bildnamen anzeigen

Question

Ich muss Bildname auf Text zeigen klicken, ohne mehrere ID für Text klicken klicken. In diesem Stück Code habe ich dies auf Bild klicken, aber ich möchte es auf Text klicken. Wenn es durch Klassenname oder einzelne ID getan werden kann, dann tun Sie es, weil ich 100 von Bildern habe ich möchte nicht den gleichen Code für schreiben mehrere Dateien.

$('img').click(function() 
 
{ 
 
var test = $(this).attr('src').split("/").pop(); 
 
document.getElementById("result").value= test; 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 

 
<div class="row"> 
 
    <div> 
 
    <img src="1.png"> 
 
    <p>click<p> 
 
    </div> 
 
    <div> 
 
    <img src="2.png"> 
 
    <p>click</p> 
 
    </div> 
 
    <div> 
 
    <img src="3.png"> 
 
    <p>click</p> 
 
    </div> 
 
</div> 
 
<form> 
 
<input type="text" id="result"> 
 
</form>

Answer 1

Do it wie folgt: -

$('p').click(function(){//on click of paragraph 
 
var test = $(this).prev('img').attr('src').split("/").pop(); // get the current click paragraph parent div image src and find out the name of image by using split 
 
$("#result").val(test); // update the name in text-field 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 

 
<div class="row"> 
 
    <div> 
 
    <img src="1.png"> 
 
    <p>click<p> 
 
    </div> 
 
    <div> 
 
    <img src="2.png"> 
 
    <p>click</p> 
 
    </div> 
 
    <div> 
 
    <img src="3.png"> 
 
    <p>click</p> 
 
    </div> 
 
</div> 
 
<form> 
 
<input type="text" id="result"> 
 
</form>

Hinweis: - nicht mischen javascript and jQuery mit jeder-andere. Benutze entweder eins rein.

Answer 2

$('p').click(function() 
 
{ 
 
    var test = $(this).parent('div').find('img').attr('src').split("/").pop(); 
 
    document.getElementById("result").value= test; 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 

 
<div class="row"> 
 
    <div> 
 
     <img src="1.png"> 
 
     <p>click<p> 
 
    </div> 
 
    <div> 
 
     <img src="2.png"> 
 
     <p>click</p> 
 
    </div> 
 
    <div> 
 
     <img src="3.png"> 
 
     <p>click</p> 
 
    </div> 
 
</div> 
 
<form> 
 
    <input type="text" id="result"> 
 
</form>

Answer 3

Verwenden Sie find() zu finden img Tag und wenden Klasse auf Tag in unserem Fall .clickelem finden Sie unten Schnipsel für weitere Informationen.

$('.clickelem').click(function() 
 
{ 
 
    var test = $(this).parent().find('img').attr('src').split("/").pop(); 
 
    document.getElementById("result").value= test; 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 

 
<div class="row"> 
 
    <div> 
 
    <img src="1.png" /> 
 
    <p class="clickelem">click<p> 
 
    </div> 
 
    <div> 
 
    <img src="2.png" /> 
 
    <p class="clickelem">click</p> 
 
    </div> 
 
    <div> 
 
    <img src="3.png" /> 
 
    <p class="clickelem">click</p> 
 
    </div> 
 
</div> 
 
<form> 
 
<input type="text" id="result"> 
 
</form>

Answer 4

$(document).ready(function() { 

    //option one set onclick on every p tag 
    $('img').parent().find('p').click(function() { 
     var test = $(this).parent().find('img').attr('src').split("/").pop(); 
     document.getElementById("result").value= test; 
    }); 

    //option two set onclick on parent div and filter events 
    $('.row').click(function(e) { 
     if (e.target.tagName != 'P') { 
      return; 
     } 
     var test = $(e.target).parent().find('img').attr('src').split("/").pop(); 
     document.getElementById("result").value= test; 
    }); 

}) 

Answer 5

Sie können es tun, wie folgt:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 

<div class="row"> 
    <div> 
     <img src="1.png"> 
     <p class='para'>click<p> 
    </div> 
    <div> 
    <img src="2.png"> 
    <p class='para'>click</p> 
    </div> 
    <div> 
    <img src="3.png"> 
    <p class='para'>click</p> 
    </div> 
</div> 
<form> 
<input type="text" id="result"> 
</form> 

Javascript

$('.para').click(function() 
{ 
    var imageSrc = $(this).prev("img"); 
    var test = $(this).attr('src').split("/").pop(); 
    document.getElementById("result").value= test; 
});