如何選擇單個圖像<div>標記和添加 onclick 功能到圖像

Question

`

 <html> <head> <body> <div> <img src="p1.jpg" alt="a" align="center" width="200" height="300" onClick="InsertPictureToMySql(event);" > <img src="p2.jpg" alt="b" align="center" width="200" height="300" onClick="InsertPictureToMySql(event);" > <img src="p3.jpg" alt="c" align="center" width="200" height="300" onClick="InsertPictureToMySql(event);" > </div> <br> <script> function InsertPictureToMysql(evt) { //event.target is where you get dom element of your picture var target = event.target; //you can then get eg event.target.src to get path to the picture... //here you can do your saving/uploading logic... <%@ page import="java.sql.*"%> <%@ page import="java.io.*"%> <% Connection con=null; ResultSet rs=null; PreparedStatement psmt=null; FileInputStream fis; String url="jdbc:mysql://192.168.10.13:3306/test"; try{ Class.forName("com.mysql.jdbc.Driver").newInstance(); con=DriverManager.getConnection(url,"root","root"); File image = window.getSelection(Image.valueOf(Image)); psmt=con.prepareStatement("insert into inimage(name,city,image)"+"values(?,?,?)"); psmt.setString(1,"Barack Obama"); psmt.setString(2,"Wasington DC"); fis=new FileInputStream(image); psmt.setBinaryStream(3, (InputStream)fis, (int)(image.length())); int s = psmt.executeUpdate(); if(s>0) { %> <b><font color="Blue"> <% out.println("Image Uploaded successfully !"); %> </font></b> <% } else { out.println("unsucessfull to upload image."); } con.close(); psmt.close(); }catch(Exception ex){ out.println("Error in connection : "+ex); } %> } </body> </head> </html>

`我嘗試了很多天，但我無法選擇單個圖像，我的目標是從 div 標簽中選擇單個圖像並給出一個函數，當點擊它時它應該存儲在 mysql 數據庫中。所以請幫助我這樣做是我的項目

 <div align="center"> <onClick="return.InsertPictureToMySql();" ><img src="images/p1.jpg" alt="a" align="center" width="200" height="300"> <onClick="return.InsertPictureToMySql();"><img src="images/p2.jpg" alt="b" align="center" width="200" height="300"> </div><br> <div align="center"> <onClick="return java.InsertPictureToMySql();"><img src="images/p1.jpg" alt="a" align="center" width="200" height="300"> <a target="_blank" href="images/p4.jpg"><img src="images/p2.jpg" alt="b" align="center" width="200" height="300"> <br> </div> <div align="center"> <onClick="return InsertPictureToMySql();"><img src="images/p1.jpg" alt="a" align="center" width="200" height="300"> <onClick="return InsertPictureToMySql();"><img src="images/p2.jpg" alt="b" align="center" width="200" height="300"> </div><br> </br>

Answer 1

這可能有幫助：

// Here, I take the last image, but you might want to take any. Then, bind the 
// click event to it 
$('img').last()
.bind('click',function() {
 alert('clicked');
 // run the function to store it in the db.
})

Answer 2

onClick 不是 html 元素。 它是 html 元素的屬性。 所以這就是你的 html 代碼的樣子：

<div align="center">
    <img src="images/p1.jpg" alt="a" align="center"  width="200" height="300" onclick="insertPictureToMysql(event);">
    <img src="images/p2.jpg" alt="b" align="center"  width="200" height="300" onclick="insertPictureToMysql(event);">
</div>

當然還有你的 JS 函數：

<script>
    function insertPictureToMysql(evt) {
        //event.target is where you get dom element of your picture
        var target = event.target;
        //you can then get e.g. event.target.src to get path to the picture...
        //here you can do your saving/uploading logic...
    }
</script>

如何選擇單個圖像<div>標記和添加 onclick 功能到圖像

問題描述

2 個解決方案

解決方案1
0 2016-03-26 16:47:56

解決方案2
0 已采納 2016-03-26 17:29:07

如何選擇單個圖像<div>標記和添加 onclick 功能到圖像

問題描述

2 個解決方案

解決方案1 0 2016-03-26 16:47:56

解決方案2 0 已采納 2016-03-26 17:29:07

解決方案1
0 2016-03-26 16:47:56

解決方案2
0 已采納 2016-03-26 17:29:07