0

さまざまなビデオの巨大なテーブル (一時的) があります。すべての動画には、その特定の動画の [サムネイルを選択] リンクがあります。

そのリンクをクリックすると、ポップアップが表示され、そのビデオの 8 つの異なるサムネイルが表示されます。

これは私のリンクです：

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

**中括弧 {{ }} は TWIG 構文であり、単なる「エコー」であることに注意してください

ここでは配列を構築しているだけです

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 親指 (良い)、2 番目にクリックしたリンク = 16 親指、3 回目のリンク = 24 など...

それはおそらく「append()」が機能する唯一の方法であることを知っています....html() のような他の挿入方法に置き換えようとしましたが、決して私が望む結果にはなりませんでした。html() は毎回 1 つのサムネイルのみを返します)

私はそれをどのように行うべきかについてここで少し混乱しています...

何か役に立ちますか？

4

1 に答える 1

2

ulをempty()指定してから、それに 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>");
    });
}
于 2012-07-19T17:03:08.147 に答える