0

I have a huge table (temporary) of different videos. Every video has a link "Choose thumbnails" for that specific video.

When you click on that link, there's a popup showing, with 8 different thumbnails for that vid.

This is my link:

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

**Note that the curly bracket {{ }} is the TWIG syntax, its just an "echo"

Here im just building an array

var videos = [];

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

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

The outputed array looks like:

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

My function

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

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

That code is working. But everytime I click on a link, instead of showing me only the thumbnails for that video, it's adding to the array. So first time I click = 8 thumb (good), 2nd link I click = 16 thumb, 3tr link = 24 etc...

I know that is probably only the way "append()" works...I tried to replace with some other insertion method like .html() but its never the result I want. html() is returning my only 1 thumbnail every time)

Im a bit confused here on how I should do that...

Any helps?

4

1 回答 1

2

You should empty() the ul, then append the lis to it.

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

    $.each(videos[id], function(i, val) {
        $ul.append("<li><img src=" + val + "></li>");
    });
}
于 2012-07-19T17:03:08.147 回答