Jquery使用单独的闪烁文本计数器 [英] Jquery using individual blinking text counters

问题描述

我有一个按钮，当用户按下，它会创建一个消息，并闪烁5次。但问题是每次我按下按钮，之前的消息也会与新消息一起闪烁。

I have a button which when user press, it will create a message and blink it 5 times. But the problem is it every time I press the button, the message before will also blink with the new message together. I want the new message to blink individually 5 times every time pressing the button.

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

我发现也许问题是我只使用一个计数器来闪烁。这就是为什么所有的消息一起闪烁。但是如何在每次按下按钮时创建一个新的计数器？眨眼功能如何知道使用哪个计数器？我试过很多方法，但失败。

I found out that maybe the problem is that I only use one counter to blink. That's why all the message blink together. But how do I create a new counter everytime the button is press? How do the blink function know which counter to use? I've tried many ways but failed. Do you guys have any idea?

推荐答案

这是因为所有添加的dvis都有相同的选择器类别num。

It is because all added dvis have same selector class num.

这样：

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

这篇关于Jquery使用单独的闪烁文本计数器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！