Question

我想在两个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行为功能/切换jquery

1 个答案: