Question

这是我的代码：

＆＃13;

  function blink(el) {
    el.fadeToggle("500", blink);
  }

$("body").on('click', '.l_acceptedanswer', function(e) {
    var $el = $(this).find('.fa-check');
		blink($el);
	
});

＆＃13;

.fa-check {
    color: #aaa;
    cursor: pointer;
}

.fa-check.checked {
    color: #44b449;
}

＆＃13;

<script src="https://use.fontawesome.com/9e9ad91d21.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<p>answer1</p>
<a class='l_acceptedanswer'>
    <i class="fa fa-check" aria-hidden="true"></i>
</a>
<hr>
<p>answer2</p>
<a class='l_acceptedanswer'>
    <i class="fa fa-check checked" aria-hidden="true"></i>
</a>
<hr>
<p>answer3</p>
<a class='l_acceptedanswer'>
    <i class="fa fa-check" aria-hidden="true"></i>
</a>

＆＃13;

如您所见，当我点击其中一个已检查图标时，它将被隐藏。为什么？我希望它永远眨眼。怎么了？

Answer 1

当您提供blink作为fadeToggle()的回调时，它会在没有您的元素作为参数的情况下调用它。这就是为什么您收到错误Uncaught TypeError: Cannot read property 'fadeToggle' of undefined - 因为el是undefined。

解决此问题的一种方法如下。

编辑：在评论中，@ stack提到无法设置较短的延迟以加快闪烁速度。指定一个毫秒数时，.fadeToggle()的第一个参数需要是一个数字，而不是一个字符串。因此，请将"500"（字符串）更改为100（数字）。

function blink(el) {
  el.fadeToggle(100, function() {
    blink(el)
  });
}

$("body").on('click', '.l_acceptedanswer', function(e) {
  var $el = $(this).find('.fa-check');
  blink($el);
});

<script src="https://use.fontawesome.com/9e9ad91d21.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<p>answer1</p>
<a class='l_acceptedanswer'>
  <i class="fa fa-check" aria-hidden="true"></i>
</a>
<hr>
<p>answer2</p>
<a class='l_acceptedanswer'>
  <i class="fa fa-check checked" aria-hidden="true"></i>
</a>
<hr>
<p>answer3</p>
<a class='l_acceptedanswer'>
  <i class="fa fa-check" aria-hidden="true"></i>
</a>

注意：您应该在控制台中看到此错误 - 即使您没有查看浏览器的控制台，Stack Overflow代码段控制台也会非常清楚地向您展示。

当fadeToggle（）永远淡出元素？

1 个答案: