隱藏顯示格前，後每格行爲功能/切換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