Javascript 使用jQuery从JSON生成图像列表，图像绑定到click事件

我是Javascript/JQuery新手，正在寻找关于如何基于AJAX调用返回的数据创建一组图像的输入。我使用$.getJSON和$.getJSON检索并迭代JSON。我还使用$.（'image_list'）.html（）将生成的标记插入到div占位符中

我不确定的是如何最好地生成标记和绑定事件，当单击图像时，函数会设置两个隐藏的输入字段（src=blog\u style\u url，title=title，alt=description）

AJAX调用以以下格式返回数据：

[{"description":"lorem ipsum","id":6,"title":"saepe atque doloremque minus","thumb_style_url":"/system/files/6/thumb/image.png?1306422297","blog_style_url":"/system/files/6/blog/image.png?1306422297"}]

这就是我到目前为止所做的，它不起作用，但希望能给我一个想法，我正在尝试做什么

                    <script>

                    function select_image(url, alt, title){
                        $("#src").val(url);
                        $("#alt").val(alt);
                        $("#title").val(title);
                    }

                    $(document).ready(function() {
                        $.getJSON('/api/images.json', function(data) {
                            var items = [];

                            //$.each(data, function(index, image) {
                                //items.push('<li><a href="javascript:void(0)" onclick="db_insert_image(\'' + image.blog_style_url + '\', \'something\')"><img src="' + image.thumb_style_url + '" /></a></li>');
                                //console.log($('<img />', { 'src' : image.thumb_style_url }));
                                //<li><a><img /></a></li>
                            //});

                            $('#dynamic_images_list').html(function() {
                                $.each(data, function(index, image) {
                                    $('<img />', {'src' : image.thumb_style_url});
                                });
                            });

                            $("img").click(function(){
                                alert('hello world!');
                            });

                        });
                    });
                </script>

函数选择图像（url、alt、标题）{
$（“#src”）.val（url）；
$（“#alt”）.val（alt）；
$（“#标题”）.val（标题）；
}
$（文档）.ready（函数（）{
$.getJSON（'/api/images.json'，函数（数据）{
var项目=[]；
//$.each（数据、函数（索引、图像）{
//项目。推送（“
”）；
//console.log（$（'

这就是我希望最终输出的样子：

// The generated markup
<div id="image_list>
  <ul>
    <li><a ..><img src="/system/files/6/thumb/image.png?1306422297" title="saepe atque doloremque minus" alt="lorem ipsum" /></a></li>
  </ul>
</div>

//生成的标记
使用。该页面包含有用的和直接的示例。
使用每个示例进行迭代确保也要注意，您可以使用以下内容将单击事件引用到页面上的IMG标记，还可以使用attr设置src或alt描述等

$("img").click(function(){
  $(this).attr('src', 'anotherPicture.jpg');
  $(this).attr('alt', 'This is a updated description');
});

//如果您想通过这些ID引用特定的IMG

$("img#1").click(function(){
  $(this).attr('src', 'anotherPicture.jpg');
  $(this).attr('alt', 'This is a updated description for id1');
});


$("img#2").click(function(){
  $(this).attr('src', 'anotherPicture.jpg');
  $(this).attr('alt', 'This is a updated description for id2');
});



//html displays 2 images on a page
<img id='1' src="/system/files/6/thumb/image.png?1306422297" title="saepe atque doloremque minus" alt="lorem ipsum" >
<img id='2' src='someOtherImage.jpg' title="saepe atque doloremque minus" alt="lorem ipsum">

$（“img#1”）。单击（函数（）{
$（this.attr（'src'，'anotherPicture.jpg'）；
$（this.attr（'alt'，'这是id1的更新描述'）；
});
$（“img#2”）。单击（函数（）{
$（this.attr（'src'，'anotherPicture.jpg'）；
$（this.attr（'alt'，'这是id2的更新描述'）；
});
//html在一个页面上显示2个图像
考虑使用jTemplates：

通过以下通话：

 $.getJSON("/MVC/GetData", "parameter=xyz", function (data) {
                    $('#image_list').setTemplate($('#imageDisplay').html());
                    $('#image_list').processTemplate(data);
                    $('#image_list li').click(function(){
                         $('#formfield1').val($(this).find('img').attr('src'));
                         $('#formfield2').val($(this).find('img').attr('title'));
                         $('#formfield3').val($(this).find('img').attr('alt'));
                    }
                });

你可以在你的HTML中使用这个

 <div id="image_list></div>

 <script type="text/html" id="imageDisplay">
    {#template MAIN}

      <ul>
      {#foreach $T.Images as image}
         {#include ROW root=$T.image}
      {#/for}
      </ul>
     {#/template MAIN}

    {#template ROW}
       <li><a ..><img src="{$T.thumb_style_url}" title="{$T.title}" alt="{$T.description}" /></a></li>
    {#/template ROW}
 </script>

那么点击正在图像上发生？那么我需要链接标签吗？不，除非你想设置一个链接，将用户带到某个地方。我会在这个答案中给你一个例子。我不确定如果这个代码已经设置了属性，你是否还需要点击事件来设置属性。点击事件不是设置图像属性，而是设置属性t基于JSON的属性在表单中添加两个隐藏字段。