Javascript - id 是时间戳，如果超过 10 个则删除最旧的

Question

有点棘手，至少对我而言。这是场景:

<div id="gifs"> 
<img src="gif/1.jpg" alt="" >
<img src="gif/10.jpg" alt="" >
<img src="gif/15.jpg" alt="" >
<img src="gif/20.jpg" alt="" >
<img src="gif/5.jpg" alt="" >
</div> 

每次用户点击图片时，图片都会变为 gif 并且 id 会设置时间戳。
问题是，我一次不想超过 4 个 gif。这意味着，如果有 4 张 gif，下次用户点击时，旧的会变回 jpg。我该怎么做？

到目前为止，这是我的 jquery:

$("#gifs img").click(function () { 
        var original = $(this).attr("src"); 
        var newsrc = original.replace('jpg','gif');
        if(!$(this).hasClass('on')){
            $(this).attr("src" , '');
            $(this).attr("src", newsrc );
            $(this).addClass('on');

            var t = new Date();
            var time = t.getTime(); 

            $(this).attr('id' , time);

            // HELP MOSTLY HERE, IN THE EACH FUNCTION.  NEED TO STORE TIMESTAMP INSIDE AN ARRAY...
            $('.on').each(function(e){

                //dif[] = $(e).attr('id');

            });

            /*var oldest = dif.min();

            var oldestsrc = $('#'+oldest).attr("src"); 
            var oldestnewsrc = oldestsrc.replace('gif','jpg');
             $('#'+oldest).attr("src",oldestnewsrc); */
        }
});

非常感谢帮助。

Answer 1

我会这样做:

(function () {
    // cache images so that we can use them later
    var $imgs = $("#gifs img");
    $imgs.click(function () {
        var $this = $(this);
        if (!$this.hasClass("on")) {
            // get all IDs of those images that are "on"
            var ids = Array.prototype.slice.call($imgs.filter(".on").map(function () { return this.id; }));
            if (ids.length >= 3) {
                // get oldest image by sorting the IDs in ascending order and get the first
                var $oldest = $("#"+ids.sort()[0]);
                // change oldest image
                $oldest.attr("src", function () { return this.src.replace("gif", "jpg"); });
                $oldest.removeClass("on");
            }
            // change for clicked image
            $this.attr("id", new Date().getTime());
            $this.attr("src", function () { return this.src.replace("jpg", "gif"); });
            $this.addClass("on");
        }
    });
})();

整体封装在一个函数中，不污染全局变量作用域。