Question

我有一张不同视频的大表（临时）。每个视频都有一个特定视频的“选择缩略图”链接。

当您点击该链接时，会显示一个弹出窗口，其中包含8个不同的缩略图。

这是我的链接：

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

**请注意，大括号{{}}是TWIG语法，它只是一个“echo”

这里我只是构建一个数组

var videos = [];

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

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

输出的数组看起来像：

 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个缩略图）

我在这里有点困惑我应该怎么做......

有帮助吗？

Answer 1

你应该empty() ul，然后将lis附加到它。

function showThumb(id){
    $("#bigThumbnailArea").show();
    var $ul = $("#bigThumbnailArea").find("ul").empty();

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

Jquery - 使用append（）打印数组

1 个答案: