javascript - 创建相同 id 的多个实例

Question

我有一个问题，我似乎自己也想不通。

假设我创建了一个段落，上面写着“+1”。当我单击一个已经存在于我的代码中的按钮时，我可以使这个段落出现在按钮上方，我可以对其进行转换，使其“y”增加并向上移动，同时缓慢消失。

因此，您单击该按钮，+1 出现在上方并在淡出时向上移动。

如果我在第一个按钮有机会消失之前单击按钮，我该怎么做才能创建此 +1 的新实例而不删除第一个实例？

因此，如果我非常快地单击按钮，按钮上方会出现一连串 +1，然后一个接一个地慢慢淡出。知道我将如何着手做这件事吗？

谢谢!!

Answer 1

这是一个使用 jQuery 的解决方案:

$('button').on('click', function() {
  var $newPlus = $('<div class="plus">+1</div>');
	$('#area').append($newPlus);
  setTimeout(function(){ $newPlus.addClass('fade'); }, 50);
  setTimeout(function(){ $newPlus.remove(); }, 650);
});

#area {
  position: relative;
  padding: 70px;
}
#area .plus {
  position: absolute;
  left: 100px;
  top: 50px;
  opacity: 1;
  transition: top 300ms ease-out, opacity 600ms ease-in-out;
}
#area .plus.fade {
  top: 0px;
  opacity: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="area">
  <button>Plus One</button>
</div>