2012-07-19 49 views
0

)我有一个巨大的表(临时)不同的视频。每个视频都有一个链接“为特定视频选择缩略图”。jquery - 用append()打印数组(

当您点击该链接时,会弹出一个窗口,显示该vid的8个不同缩略图。

这是我的链接:

<a class="bigThumbnailLink" onclick="showThumb({{stat.video_id}})">Choose</a> 

**注意花括号{{}}是树枝语法,它只是一个 “回声”

这里我只是建立一个数组

var videos = []; 

{% for statThumb in stats %} 
    videos[{{ statThumb.video_id }}] = []; 

    {% for thumb in statThumb.thumbnails %} 
     videos[{{ statThumb.video_id }}].push('{{ thumb }}'); 
    {% endfor %} 
{% endfor %} 

的outputed阵列看起来像:

var videos = []; 
    videos[609417] = []; 
      videos[609417].push('http://1.jpg'); 
      videos[609417].push('http://2.jpg'); 
      videos[609420] = []; 

我的功能

function showThumb(id){ 
     $("#bigThumbnailArea").show(); 

     jQuery.each(videos[id], function(i, val) { 
      $("#bigThumbnailArea").find("ul").append("<li><img src=" + val + "></li>"); 
     }); 
    } 

该代码工作。但每次我点击一个链接,而不是只显示该视频的缩略图,它就会添加到该数组中。所以我第一次点击= 8拇指(好),第二个链接我点击= 16拇指,3tr链接= 24等...

我知道这可能只是“append()”的作品...我试图用一些其他插入方法替换.html(),但它从来没有我想要的结果。 HTML()是每次)返回我只有1个缩略图

林有点困惑在这里,我应该怎么办?

任何帮助?

+0

这可能工作:$( “#bigThumbnailArea”)找到( “UL”)空()追加( “

  • ”)。注意链接的empty()函数调用 – Vikram 2012-07-19 17:06:17

    +0

    @Vikram:你想在循环之外“清空”,所以你在每次迭代时都不清空。 – 2012-07-19 17:45:11

    回答

    2

    你应该empty()的ul,然后将它附加到它。

    function showThumb(id){ 
        $("#bigThumbnailArea").show(); 
        var $ul = $("#bigThumbnailArea").find("ul").empty(); 
    
        $.each(videos[id], function(i, val) { 
         $ul.append("<li><img src=" + val + "></li>"); 
        }); 
    }