显示()第二次不工作后切换

Question

我有一个跨度，我想隐藏，并显示另一个点击。当我展示这第二个跨度时，它会显示出一个效果。

问题是，它只适用于第一次点击。不是在第二次。(第三种效果很好，但在第四种情况下不起作用，等等)。

unclick 之后的，再点击它，就不会显示动画了.

怎么啦？为什么不能看到动画后，取消点击和再次单击？

js

$(function() {
 $( document ).on( "click", "#click", function() {
  $(this).hide();
  $('#unclick').show();

  $('#unclick').toggleClass("l_toggle"); //work only first time?

 });


 $( document ).on( "click", "#unclick", function() {
  $(this).hide();
  $('#click').show();
 });





});

https://jsfiddle.net/b7c34kgv/2/

Answer 1

隐藏l_toggle类时移除unclick类

$( document ).on( "click", "#unclick", function() {
  $(this).hide();
  // add this
  $('#unclick').removeClass("l_toggle");
  $('#click').show();
 });

Answer 2

将$('#unclick').toggleClass("l_toggle");添加到#unclick的单击处理程序

$(function() {
 $( document ).on( "click", "#click", function() {
  $(this).hide();
  $('#unclick').show();

   $('#unclick').toggleClass("l_toggle");

 });


 $( document ).on( "click", "#unclick", function() {
  $(this).hide();
  $('#click').show();
  $('#unclick').toggleClass("l_toggle"); // add this
 });





});

​

$(function() {
 $( document ).on( "click", "#click", function() {
  $(this).hide();
  $('#unclick').show();
  
   $('#unclick').toggleClass("l_toggle");
  
 });


 $( document ).on( "click", "#unclick", function() {
  $(this).hide();
  $('#click').show();
  $('#unclick').toggleClass("l_toggle"); // add this
 });





});

#unclick img{
  width:30px;
}

#unclick{
  display:none;
}

.l_toggle img{
  animation-name: spin; 
  animation-duration: 1s;
}
@keyframes spin { 
 25% { transform: scale(1.2); }
 33% { transform:rotate(35deg); } 
 66% { transform:rotate(-35deg); }
 100% { transform:rotate(0deg); }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<span id=click>click</span>

<span id=unclick><img src=http://icons.iconarchive.com/icons/paomedia/small-n-flat/1024/sign-check-icon.png>unclick</span>

​