javascript - getJSON，迭代，显示图像

Question

我有包含图像的 JSON。看起来像：

["1.jpg","2.jpg","3.jpg","4.jpg","Thumbs.db","..","." .............]

我可以像这样一个一个地访问它们：

data[0]
data[1]
data[2]

但是，我想在特定的 div 中动态显示所有这些图像（在一列中）。像这样的东西：

$(document).ready(function() {

    updateProfil();

    function updateProfil() {
        $.getJSON("./index_logg1.php", null, processCategory); 
    }   

    function processCategory(data) {
        $.each(data, function() {
            // the code ????
        });

        $("#my_user").html('<img src='+ ???? +' />');
        $("#my_user").hide().fadeIn(700);
    }

});

编辑 ：

你好，

谢谢您的回复。我现在能够动态地可视化图像（使用以下代码），但问题是我希望能够在单击图像时（动态地）捕获 href 值。（然后通过 jquery post 将其发送到 php）

它显示鼠标悬停时的值，但在单击时捕获它们没有运气。到目前为止似乎没有任何工作......

编码：

enter code here
    function updateProfil() {
  $.getJSON("./index_logg2.php", null, processCustom); 
   }

function processCustom(data) {
   $.each(data, function(k, v) {
   $(".panel").append('<center><a href="?cust='+  k +'"><img src="images/custom/'+ v +' "title="Click to set it" "></a></center><br />');

   /*
   $(".panel").click(function() {
 var data= ???
   $.post("./index_logg2.php", { data: ??? }, updateProfil ); 
   });
   */

   });
   } 

谢谢 ！

Answer 1

你可以this在里面使用$.each，

function processCategory(data) {

    $.each(data, function(){
       $("#my_user").append("<img src='"+this+"' />");
    });

    $("#my_user").hide().fadeIn(700);
}

Answer 2

$(document).ready(function() {

    updateProfil();

    function updateProfil() {

    html="";
    $.getJSON('./index_logg1.php', function(data) {

        $.each(data, function(i) {
            html+='<img src='+ data[i] +' />'
        });

        $("#my_user").html(html);
        $("#my_user").hide().fadeIn(700);
    }

});

Answer 3

我不确定这是性能最佳的解决方案，但一个接一个地添加可确保立即添加图像。

    function processCategory(data) {
      $.each(data, function(i, val) {
        $('#my_user').append($('<img>', { src: val, alt: 'pic' }));
      });

      $("#my_user").hide().fadeIn(700);
    }