on textクリックすると画像名が表示されます

Question

テキストに画像の名前を表示するには、クリックしてください。このコードではイメージのクリックでこれを行いましたが、テキストのclick.Ifでそれを行うには、クラス名または単一のIDを使って行うことができます。イメージを100個持っているので、同じコードを書く必要はありません複数のファイル。

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

以下のようにそれを実行します -

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

注： -は、それぞれ、相互にjavascript and jQueryを混在させないでください。純粋にどちらか1つを使用してください。

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

imgタグを見つけてpタグにクラスを適用するには、.clickelem下記のスニペットをご覧ください。

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

次のようにあなたがそれを行うことがあります。

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