Question

我想动态地将图片添加到我的网站。当用户单击按钮时，通过jquery对服务器进行ajax调用，返回包含图像URL和id的json文件。我想在我的网页上呈现这些图像，然后更改它们的样式（基于某些条件显示），然后将click事件添加到这些图像（单个事件处理程序将捕获引发事件的图像的id）。请帮帮我。

Answer 1

您可以按如下方式创建图像元素。

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" */

然后将

添加到名为“imagecontainer”的div中的某个地方，例如in <div id="imagecontainer">

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

然后完成：）

P.S。你有没有ajax代码？这个url会帮助你，只需在示例代码中附加此代码，然后完成。 http://api.jquery.com/jQuery.getJSON/

Answer 2

类似的东西：

<强> 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.'"}';
}

使用JSON，AJAX和JQuery进行动态图像加载和事件绑定

2 个答案: