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