根据 div 行为隐藏显示 div 正面和背面 function/toggle 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

为什么不使用 toggle() 函数？

$('.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

根据 div 行为隐藏显示 div 正面和背面 function/toggle jquery

Hide show div front and back per div behaviour function/toggle jquery

jquery

toggle

hide

show

closest