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帖子将其发送到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);
    }

getJSON，迭代，显示图像

3 个答案: