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

整体包含在一个不污染全局变量范围的函数中。

Answer 2

我远离javascript专家，但我认为我陷入了困境。您可能感兴趣的是Circular buffer：

这个想法是你要保持这个数组的设置，以存储与你的图像扩展相关的（最多）4个ID（我稍后会看到单元化的东西）：

var gifs=['uninitialized','uninitialized','uninitialized','uninitialized'];

技巧是如何访问此数组。让我们添加另一个变量：

var currentIndex=0;

这个想法是你只想要一个包含4个元素的列表，如果你添加第五个元素，你将替换最旧的元素。以下是访问如何工作的想法：

让我们添加'a'：

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

现在让我们抛出'b'和'c'：

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

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

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

因此循环缓冲区中的“循环”。当您向数组中添加足够的元素时，索引将返回到开头。真的很壮观。如果你想知道这有多容易，那就不是太复杂了。要在循环时“递增”currentIndex，不需要“if”：

currentIndex=(currentIndex+1)%4

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

但是如果我们想要放入另一个元素会发生什么？喜欢（选择随机字母），如果我们尝试添加'e'？：

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

好吧，数组不会神奇地扩展，所以它用'e'代替'a'（要添加的最旧的元素）。因此对问题的效用。

如果我正在攻击这个问题，我会在下面实现一些东西（假设我已经定义了以前的东西）：

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

和bam！没有丑陋的DOM技术，只是一些老式的简单的编程语言无关的解决方案。并且它在某种程度上是恒定的时间（与整个标签不同）。你甚至不需要打扰时间戳，只需给你的东西一些“独特的”id（你甚至可以使用循环缓冲区为你的标签分配id！）

（循环缓冲区通常有更多的样板来访问元素和诸如此类的东西，但在这里我只是试图坚持必要的。希望它没有简化到概念丢失的程度）

对不起我的错误Javascript，对于webdev我是外国人。

Answer 3

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

Answer 4

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

var stamps = new Array();
  $('.on').each(function(e){
    stamps[] = $(e).attr('id');
  });

  if (${stamps.length}>4){
      stamps.sort(function sortNumber(a,b){return b - a;})
        for (var i=4;i<stamps.length;i++) 
        {
          $(e).remove()
        }
  }

它以相反的顺序对时间戳进行排序，并删除超过4个邮票的所有内容。

享受=）

Answer 5

以下是我对使用javascript数组推送和移位功能的理解

http://jsfiddle.net/nickywaites/UcDAV/

可能可以整理一下

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

});

Answer 6

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


        }
});

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

6 个答案: