使用JSON，AJAX和JQuery進行動態圖像加載和事件綁定

我想動態地將圖像添加到我的網站。當用戶點擊一個按鈕時，通過jquery的ajax調用被髮送到服務器，返回一個包含圖像url和id的json文件。我想在我的網頁上渲染這些圖像，然後更改它們的樣式（基於某些條件顯示），然後將點擊事件添加到這些圖像（一個事件處理程序捕獲引發事件的圖像ID）。請幫幫我。使用JSON，AJAX和JQuery進行動態圖像加載和事件綁定

來源

2012-07-24 Abhay Kumar

您是否嘗試過自己做這件事，或者您是否想讓某人爲您做這項工作？ – sgress454 2012-07-24 23:44:35

@ScottGress，我嘗試過，但動態添加的圖像樣式沒有改變，雖然對於靜態添加的圖像，我可以使用$（「＃item」）.css（「style」，「value」）更改樣式。。 – 2012-07-25 06:07:25

您可以按如下方式創建圖像元素。

var img=document.createElement("img"); 
img.onclick=function() { /* js code here*/ }; 
img.src="http://example.com/example.jpg"; 
img.style.display="block"; 
/* or give css class, image.className="picture" */

然後附加在某處DIV名爲「imagecontainer」例如在 <div id="imagecontainer">

document.getElementById("imagecontainer").appendChild(img);

然後做:)

附：你沒有ajax代碼嗎？這個網址會幫助你，只需在示例代碼中附加這段代碼，然後完成。 http://api.jquery.com/jQuery.getJSON/

來源

2012-07-24 23:10:12

謝謝你，完美的工作。我可以從事件處理函數調用另一個函數，例如： img.onclick = function（）{another_func（id_of_clickd_element）; }; 我試過這個，但它不工作。 – 2012-07-25 10:49:33

通常你可以，你得到什麼錯誤？或者你可以做太多的功能another_func（）{/ * this.id * /};和img.onclick = another_func; – 2012-07-25 14:20:05

Thanx Burak，那工作.. – 2012-07-26 21:11:45

類似的東西：

HTML

<img id="15623" src="img/default.jpg" />

jQuery的

$('img').click(function() { 
    var context = $(this); 
    $.getJSON('/getImage.php?id=' + $(this).attr('id'), function (json) { 
     context.attr('src', json.url); 
    }); 
});

PHP

//db connection 

$id = $_GET['id']; 

if (is_numeric($id)) { 
    $query = mysql_query('SELECT url FROM img WHERE id = '.$id); 
    $res = mysql_result($query, 0); 
    return '{"url": "'.$res.'"}'; 
}

來源

2012-07-24 23:17:17

使用JSON，AJAX和JQuery進行動態圖像加載和事件綁定

回答

相關問題