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

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

Answer 1

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

这样的事情：

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

Answer 2

更新： 作为“但我希望旧邮件继续闪烁5次。”.. JSFiddle

var counter, i = 0;

function blink(selector) {
    for(counter = 0; counter < 5; counter++){
    	$(selector).fadeOut('slow').fadeIn('slow');
    }
}

$("#but").click(function () {
    ++i;
    counter = 0;
    $('#result').prepend('<div id="id-' + i + '">Number ' + i + '</div>');
    blink('#id-' + i);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="result"></div>
<button id="but">Blink again 1</button>

Answer 3

我发现可能问题是我只使用一个计数器眨。这就是为什么所有消息一起闪烁的原因。但是我该如何创造每次按下按钮时都会有一个新的计数器？

尝试为每次点击按钮创建不同的类名。尽管已弃用，但使用.selector来过滤特定元素以避免同时更新所有元素html。如果使用了选择器.num:eq(n)，则再次调用.prepend()时，现有的.num元素将不再位于索引0，导致两个元素或所有元素一次闪烁。

＆＃13;

function blink(callback) {
  var sel = $(this.selector);
  if (sel.data().count === undefined) {
    sel.data("count", blink.counter);
  }
  sel.fadeOut('slow', function() {
    sel.fadeIn('slow', function() {
      if (sel.data().count < blink.max) {
        sel.data().count = 1 + sel.data().count;
        callback.call(sel);
        sel.blink(callback.bind(sel));
      } else {
        sel.data().count = blink.counter
      }
    });
  });
}

blink.counter = 0;
blink.max = 5;

$.fn.blink = blink;

var i = 0;
$("#but").click(function() {
  $('#result').prepend("<div class=num-" + i + ">Number</div>");
  $(".num-" + i).blink(function() {
    $(this).append($(this).data().count)
  });
  ++i;
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<div id="result"></div>
<button id="but">Blink again 1</button>

＆＃13;

jsfiddle http://jsfiddle.net/Vaysf/876/

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

3 个答案: