我正在尝试使用jQuery实现简单的隐藏/显示function。 我有两组方框:A和B.我希望能够单击一个按钮才能看到组A中的方框,而另一个按钮则只显示组B.这不应该取决于之前页面上发生的情况,或按下按钮的顺序。
基于jQuery UI hide()
函数的官方基本代码示例,我使用的策略是按钮单击有两个效果:首先,隐藏两个组中的所有框,然后显示组I中的框想看。 还有一个显示所有盒子的按钮,基本上可以作为重置。
有时它会起作用,有时却不起作用(下面是MVCE片段)。 当我从新页面加载或重置开始时,我可以单击按钮显示组A,这很好。 但是,当我单击按钮显示组B时,组A按钮保持在屏幕上。 或者,从一个新的页面/重置,我可以点击B组按钮,只看到组B中的框,然后是组A按钮,只看到组A中的框,但是我不能再回到组B 。
对控制台和其他组进行的一些调查显示,这与DOM命令有关。 我总是可以选择我想要的任何给定组,但是如果我然后尝试显示DOM中较早出现的组,那么事情就会搞砸。
是什么导致了当前的行为,我该如何解决?
$(function() { $("#toggleAll").on("click", function() { $('.box').removeAttr("style").hide().fadeIn(); }); $("#toggleA").on("click", function() { $('.box').hide('clip', {}, 1000); $('.groupA').removeAttr("style").hide().fadeIn(); }); $("#toggleB").on("click", function() { $('.box').hide('clip', {}, 1000); $('.groupB').removeAttr("style").hide().fadeIn(); }); });
.box { border: 1px solid black; }
Show boxes of type:
Title
Text for box A1
Title
Text for box A2
Title
Text for box B1
Title
Text for box B2
只需在没有所有附加选项的情况下尝试它并使用简单的hide()
和show()
,或者在您的情况下使用fadeIn()
$(function() { $("#toggleAll").on("click", function() { $('.box').fadeIn(); }); $("#toggleA").on("click", function() { $('.box').hide(); $('.groupA').fadeIn(); }); $("#toggleB").on("click", function() { $('.box').hide(); $('.groupB').fadeIn(); }); });
.box { border: 1px solid black; }
Show boxes of type:
Title
Text for box A1
Title
Text for box A2
Title
Text for box B1
Title
Text for box B2
以上就是jQuery教程分享jQuery UI隐藏不会对早期DOM元素生效相关内容,想了解更多jQuery开发(异常处理)及jQuery教程关注计算机技术网(www.ctvol.com)!)。
本文来自网络收集,不代表计算机技术网立场,如涉及侵权请联系管理员删除。
ctvol管理联系方式QQ:251552304
本文章地址:https://www.ctvol.com/jquerytutorial/561321.html