隐藏显示格前，后每格行为功能/切换jquery

Question

我想创建一个2类div与类之间的切换：前面和后面。两者都在.entry-footer。它是好的。但最后一步是，它需要恢复正常：前面可见，后面隐藏...并不是所有的背部应该只隐藏klikobj（= clikobject）.... 任何建议，以优化此代码？

https://jsfiddle.net/ontwerp73/osg8up7a/2/#&togetherjs=UojQmsnD2F

$('.entry-footer').on('click', function(event) { 
    var klikobj = event.target; 
    $(klikobj).closest('.front').hide(); 
    $(klikobj).next('.back').show(); 
    $('.back').on('click', function(event) { 
     $(klikobj).closest('.front').show(); 
     $(klikobj).next('.back').hide(); 
    }); 
}); 

HTML基础：

<footer class="entry-footer"> 
<div class="front" style="display: block;"> 
<br>Titel: Mr Robot<br>Regisseur: mr Bean<br>Producent: Spielberg<br>Info: extra extra! extra extra! extra extra! extra extra! <br>Productiejaar: 2017    </div> 
<div class="back" style="display: none;"> 
<br>Beschrijving: Een robot is een programmeerbare machine die verschillende taken uit kan voeren. Hierin verschilt hij van een numerieke machine, die is geprogrammeerd voor één taak. In de praktijk betekent....</div> 
</footer> 

Answer 1

为什么不使用切换（）函数？

$('.entry-footer').click(function() { 
    $(this).children().toggle(); 
}); 

工作版本的多个div：

$('.entry-footer').click(function() { 
    var childNum = $(this).children().length; 
    $(this).children().each(function(ind, el) { 
     if ($(this).is(':visible')) { 
      if (ind == childNum - 1){ 
       $(this).siblings(":first").show(); 
       $(this).hide(); 
       return false; 
      } else { 
       $(this).hide(); 
       $(this).next().show(); 
       return false; 
      } 
     } 
    }); 
}); 

jsfiddle