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

有点棘手，至少对我来说是这样。以下是场景：

<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> 

---

非常感谢您的帮助。

我建议您设置一个数组来存储当前显示的四个文件的信息，然后使用此信息了解您何时已经有四个文件，以及在文件已满时删除哪一个文件。这至少是一个天真的答案：也许有更聪明的方法可以做到这一点？

这里只是.each（）的一部分

var stamps=new Array（）；
$（'.on'）。每个（函数（e）{
邮票[]=$（e）.attr（'id'）；
});
如果（${stamps.length}>4）{
sort（函数sortNumber（a，b）{返回b-a；}）
对于（var i=4；i我会这样做：

(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");
        }
    });
})();

整个过程被包装在一个函数中，以避免污染全局变量范围。
以下是我对使用javascript数组推送和移位函数的理解


也许能把这整理一下

$(function() {

var gifs = $('img[src$=gif]').get(); // Get all gifs
$('#images img').click(function() {
    console.log(gifs);
    var img = $(this);
    var src = img.attr('src');
    img.attr('src', src.replace('jpg', 'gifs'));
    if (gifs.indexOf(this) === -1) {
        gifs.push(this);
    }
    if (gifs.length > 4) {
        var last = gifs.shift();
        src = $(last).attr('src');
        $(last).attr('src', src.replace('gif', 'jpg'));
    }
    console.log(gifs);
});

});

我远非javascript专家，但我想我理解你的困境。你可能感兴趣的是：

我们的想法是，您将保持此阵列的设置，以存储（最多）4个与图像扩展内容相关的ID（稍后我将讨论单元化内容）：

诀窍在于如何访问此数组。让我们添加另一个变量：

var currentIndex=0;

我们的想法是，您只需要有一个包含4个元素的列表，如果您添加第五个元素，您将替换最旧的元素。下面介绍访问的工作原理：

让我们加上“a”：

['a','uninitialized','uninitialized','uninitializedl']
       ^ currentIndex

现在让我们加上“b”和“c”：

['a','b','c','uninitialized']
               ^ currentIndex

现在是棘手的部分。到目前为止，我们已经将currentIndex增加了1（或者我们认为是这样）。让我们看看当我们添加“d”时会发生什么：

[ 'a' ,'b','c','d']
   ^ currentIndex

因此，循环缓冲区中的“循环”。当您向数组中添加足够的元素时，索引将返回到开始处。非常棒。如果您想知道这有多容易，它并不太复杂。要在循环currentIndex的同时“增加”currentIndex，无需使用“如果”：

currentIndex=(currentIndex+1)%4

（显然，用您想要的缓冲区长度替换4）

但是，如果我们想放入另一个元素，比如（选择一个随机字母），如果我们尝试添加“e”，会发生什么呢

[ 'e' , 'b' , 'c', 'd'] 
         ^ curentIndex

嗯，数组不会神奇地扩展，所以它用“e”替换了“a”（要添加的最古老的元素）。因此，这个实用程序解决了这个问题

如果我要解决这个问题，我会实现以下内容（假设我已经定义了前面的内容）：

还有bam！没有难看的DOM技术，只是一些好的老式简单编程语言不可知的解决方案。而且它有点固定时间（不像排序整个标记）。你甚至不需要麻烦时间戳，只需要给你的东西一些“唯一”的ID（你甚至可以使用循环缓冲区为你的标记分配ID！）

（循环缓冲区通常有更多用于访问元素等的样板文件，但这里我只是试图坚持必要的。希望它不会简化到失去概念的程度）

对不起，我的Javascript不好，我对webdev是个外国人。
$（“#gifs img”）。单击（函数（）{
$("#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);

            var minimum = time;
            var counter = 0;
            $('.on').each(function(){ 

                counter = counter +1;   
                var current  = $(this).attr('id')*1;  

                if( current <= minimum ){ minimum = $(this).attr('id')*1; }

            });

            if(counter >= 10){ 
                var oldestsrc = $('#'+minimum).attr("src"); 
                var oldestnewsrc = oldestsrc.replace('.gif','.jpg');
                $('#'+minimum).attr("src",oldestnewsrc);
                $('#'+minimum).removeClass('on');
                $('#'+minimum).attr('id','');

                counter = 0;
            }


        }
});

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=新日期（）；
var time=t.getTime（）；
$（this.attr（'id'，time）；
var最小值=时间；
var计数器=0；
$（'.on'）。每个（函数（）{
计数器=计数器+1；
var current=$（this.attr（'id'）*1；
如果（电流=10）{
var oldestsrc=$（'#'+最小值）.attr（“src”）；
var oldestnewsrc=oldestsrc.replace（'.gif'，'.jpg'）；
$（'#'+最小值）.attr（“src”，oldestnewsrc）；
$（'#'+最小值）.removeClass（'on'）；
$（'#'+最小值）.attr（'id'，''）；
计数器=0；
}
}
});
基本上，我在每个函数上都有问题。这应该存储时间戳，如果数组长度超过4，则获取最旧的时间戳，然后将其切换回jpg…我想我不明白为什么要使用时间戳。以后是否出于某种原因需要时间戳？如果不需要，则使用一个每次单击某个内容时，st都会增加1。我使用时间戳来查找哪一个是最老的。如果您查看此处的其他一些建议，则实际上不需要时间戳。有趣的是……我无法理解所有内容，但它似乎缺少这类计数器（当时为4个）。你会怎么做？@denislexic:我添加了一些注释；希望能有所帮助。对类似的内容使用排序应该会在某些地方引起警告。@Dasuraga，你有两个选择来确定列表中最古老的元素。你可以按时间戳/年龄排序，或者使用队列从底部提取更改的元素并将它们放在顶部。Ei另外，您正在排序（主动与被动）。使用“排序”应该允许动态添加新元素，而不必将它们添加到队列中，等等。我相信排序是最灵活的解决方案。我有一个想法，使用4个元素的堆栈并弹出最旧的元素，但这里的循环缓冲区似乎避免了弹出任何东西，因此非常好。
currentIndex=(currentIndex+1)%4

[ 'e' , 'b' , 'c', 'd'] 
         ^ curentIndex

function addGif(id){
    if(gifs[currentIndex]=='uninitialized')//We haven't gotten to 4 gifs yet, no magic necessary
         gifs[currentIndex]=id;
    else{//we've reached 4 gifs, so now it's time for some "magic"
           //do whatever you need to do with the oldest gif(at currentIndex)
           removeGif(gifs[currentIndex]);//obviously this function will need to be written
          gifs[currentIndex]=id;
   }
    //don't forget to increment the index!
    currentIndex=(currentIndex+1)%buffer;
}

$("#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);

            var minimum = time;
            var counter = 0;
            $('.on').each(function(){ 

                counter = counter +1;   
                var current  = $(this).attr('id')*1;  

                if( current <= minimum ){ minimum = $(this).attr('id')*1; }

            });

            if(counter >= 10){ 
                var oldestsrc = $('#'+minimum).attr("src"); 
                var oldestnewsrc = oldestsrc.replace('.gif','.jpg');
                $('#'+minimum).attr("src",oldestnewsrc);
                $('#'+minimum).removeClass('on');
                $('#'+minimum).attr('id','');

                counter = 0;
            }


        }
});