根据 div 行为隐藏显示 div 正面和背面 function/toggle jquery
Hide show div front and back per div behaviour function/toggle jquery
我想在 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>
为什么不使用 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;
}
}
});
});
我想在 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>
为什么不使用 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;
}
}
});
});