on text点击显示图片名称

Question

我必须在文字上点击显示图片名称，而不需要为文本点击创建多个ID。在这段代码中，我已经完成了图像点击操作，但是我希望它能够通过文本点击。如果可以通过类名称或单个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每个-等。纯粹使用任意一个。

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

使用find()找到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; 
});