如何識別圖像ID標記不是靜態的點擊圖像？

這裏是PHP代碼，是一個div裏面顯示來自服務器的HTML的圖像列表：

while($row = $result->fetch_assoc()) { 
    echo "<div class='col-lg-3 col-md-4 col-xs-6 thumb'><a class='thumbnail' href='#'><img id='template" . $row["imageName"]. "' class='img-responsive' src='../images/templates/" . $row["imageName"].".". $row["imageExtension"]."' alt='error' width='333px' height='262px' class='img-thumbnail' onClick='changeImage()'></a></div>"; 
}

的PHP代碼循環服務器中的每個圖像，並創建另一個div，裏面是img。

現在，我的問題是如何識別點擊的特定圖像？我無法使用document.getElementById('');，因爲首先我不知道身份證的權利？儘管我通過添加id='template" . $row["imageName"]. "'來表示每個圖像的假定ID是template[x]，其中x是來自數據庫的圖像名稱，但它們都是唯一ID。

我正在努力如何識別用戶點擊過的特定圖像。

有什麼方法可以識別圖像嗎？

來源

2016-02-12 JeffMan

這樣做：

$("img").click(function(){ 
    alert("Image ID is: " + $(this).attr("id")); 
});

這將顯示ü在彈出單擊圖像的ID。

基本上上面的代碼等待點擊頁面上任何img元素上的。

一旦img被點擊，U只檢索的「id」 的點擊元件可由$(this)被稱爲屬性，因此在警告框中顯示它。

來源

2016-02-12 12:55:22

OP爲什麼要「試試這個」？一個好的答案***將總是解釋所做的事情以及爲什麼這樣做，不僅是爲了OP，而且是爲了將來SO的訪問者。 –

'' – JeffMan

$('.img-responsive').on('click',function(){ 
    $(this).attr("id"); 
});

這將爲所有圖片點擊收聽，我們要跟蹤只有特定的圖像，其中有img-responsive類圖像，一旦它得到了點擊，我們可以使用this

來源

2016-02-12 12:55:22

OP爲什麼要「試試這個」？一個好的答案***將總是解釋所做的事情以及爲什麼這樣做，不僅是爲了OP，而且是爲了將來SO的訪問者。 –

你好@Jimish Gamit，特別是我應該在上面的示例片段？謝謝！ – JeffMan

你應該在頁面末尾添加'' –

如果圖像輕鬆訪問通過AJAX或某種動態方法加載到頁面中，您可能需要使用$（document）.on（）。使用「.img-responsive」選擇器爲您的頁面選擇class =「img-responsive」的所有圖像。

$(document).on("click", ".img-responsive", function() { 
    alert("Image ID is: " + $(this).attr("id")); 
}

來源

2016-02-12 12:59:55 jjwdesign

OP爲什麼要使用'.on（）'？ –

嗨，我試着把你的代碼片段放在函數'changeImage（）'中，這個函數被Onclick調用，這裏的大多數答案都可以工作，它顯示點擊圖片的ID，但是有一些令人毛骨悚然的事情發生，第一次點擊，警報不運行，在第二次點擊，警報兩次運行警報，使其顯示與同一ID 2的警告對話框。這裏是下面的功能： '' – JeffMan

$("img").click(function(event){ 
    alert("Image ID is: " + event.target.id); 
});

Demo Fiddle

event.target：該event.target屬性返回其DOM元素觸發event.The 事件參數來自事件結合功能。

來源

2016-02-12 13:00:41

OP爲什麼要「試試這個」？一個好的答案***將總是解釋所做的事情以及爲什麼這樣做，不僅是爲了OP，而且是爲了將來SO的訪問者。 –

@JayBlanchard :)我會保持這一點，並嘗試改善我的回答風格。 –

的jQuery：

$('.divclass img').click(function() { 
    console.log('Clicked image ID ' + $(this).attr('id')); 
});

.divclass img因爲（或ID作爲#divid img，如果你願意的話）我想這將是更有效的只有在特定的div目標圖像，而不是整個文件內。

你也可以執行其他的JavaScript功能，傳遞圖像的ID作爲參數，或者甚至整個元件，例如：

someFunction($(this)); // Transfer the whole element as an argument.

或

someFunction($(this).attr('id')); // Transfer just the ID as an argument.

和函數本身：

function someFunction(image) { 
    // Do some things with the image. 
}

祝你好運！

來源

2016-02-12 13:01:00

回答

相關問題