javascript - Jquery 使用单独的闪烁文本计数器

Question

我有一个按钮，当用户按下时，它会创建一条消息并闪烁 5 次。但问题是每次我按下按钮，之前的消息也会随着新消息一起闪烁。我希望新消息在每次按下按钮时单独闪烁 5 次。

html:

<div id="result"></div>
<button id="but">Blink again 1</button>

js:

var counter = 0;
var i = 0;
function blink(selector){
$(selector).fadeOut('slow', function(){
    $(this).fadeIn('slow', function(){
        if(counter++ <= 5)
        blink(this);
    });
});
}

$("#but").click(function() {
i++;
counter = 0;
$('#result').prepend("<div class='num'>Number " + i + "</div>");
blink('.num');
});

JSFIDDLE

我发现问题可能出在我只使用一个计数器来闪烁。这就是所有消息一起闪烁的原因。但是每次按下按钮时如何创建一个新计数器？ blink 函数如何知道要使用哪个计数器？我尝试了很多方法但都失败了。你们有什么想法吗？

Answer 1

因为所有添加的dvis都有相同的selector class num。

像这样:

$("#but").click(function() {
    i++;
    counter = 0;
    sel = 'num' + i;
    $('#result').prepend("<div class='"+sel+"'>Number " + i + "</div>");
    blink('.' + sel);
});