如何解决jquery-切换div内div的可见性
| jQuery函数出现问题。 情况 我得到一个div,其中包含一个<input type=\"radio\" />
元素列表。这些应该可以远程控制其他两个div的可见性。选中时,第一个无线电输入字段应显示第一个div,其他字段应a)第二个div,b)仅第二个div内的一个div。
问题
第一和第二个主要div之间的显示(显示/隐藏切换)工作正常。无效的是切换第二个div内的div的可见性状态。
<script type=\"text/javascript\">
jQuery( document ).ready( function($)
{
$( \"#post_format_box\" ).addClass( \"hidden\" );
$( \"input#post-format-0\" ).change( function() {
$( \"#postdivrich\" ).removeClass( \"hidden\" );
$( \"#post_format_box\" ).addClass( \"hidden\" );
} );
$( \"input:not(#post-format-0)\" ).change( function() {
$( \"#postdivrich\" ).addClass( \"hidden\" );
$( \"#post_format_box\" ).removeClass( \"hidden\" );
} );
$( \"#post-format-aside\" ).change( function() {
$( \"#aside\" ).removeClass( \"hidden\" );
} );
$( \"#post-format-audio\" ).change( function() {
$( \"#audio\" ).removeClass( \"hidden\" );
} );
$( \"#post-format-chat\" ).change( function() {
$( \"#chat\" ).removeClass( \"hidden\" );
} );
$( \"#post-format-gallery\" ).change( function() {
$( \"#gallery\" ).removeClass( \"hidden\" );
} );
$( \"#post-format-image\" ).change( function() {
$( \"#image\" ).removeClass( \"hidden\" );
} );
$( \"#post-format-link\" ).change( function() {
$( \"#link\" ).removeClass( \"hidden\" );
} );
$( \"#post-format-quote\" ).change( function() {
$( \"#quote\" ).removeClass( \"hidden\" );
} );
$( \"#post-format-status\" ).change( function() {
$( \"#status\" ).removeClass( \"hidden\" );
} );
$( \"#post-format-video\" ).change( function() {
$( \"#video\" ).removeClass( \"hidden\" );
} );
}
);
</script>
div如下所示:
<div id=\"formatdiv\">
<!-- REMOTE CONTROLING DIV -->
<!-- SHOWS/HIDES THE #postdivricht -->
<input type=\"radio\" class=\"post-format-0\" checked=\"checked\" />
<!-- THESE SHOW/HIDE THE SINGLE DIVS INSIDE #postdivricht -->
<input type=\"radio\" id=\"post-format-aside\" />
<input type=\"radio\" id=\"post-format-audio\" />
<input type=\"radio\" id=\"post-format-chat\" />
<input type=\"radio\" id=\"post-format-gallery\" />
<input type=\"radio\" id=\"post-format-image\" />
<input type=\"radio\" id=\"post-format-link\" />
<input type=\"radio\" id=\"post-format-quote\" />
<input type=\"radio\" id=\"post-format-status\" />
<input type=\"radio\" id=\"post-format-video\" />
</div>
<div id=\"postdivrich\">
<!-- FIRST REMOTE CONTROLED DIV -->
</div>
<div id=\"post_format_box\">
<!-- SECOND REMOTE CONTROLED DIV -->
<div id=\"aside\">
<p>Aside</p>
</div>
<div id=\"audio\">
<p>Audio</p>
</div>
<div id=\"chat\">
<p>Chat</p>
</div>
<div id=\"gallery\">
<p>Gallery</p>
</div>
<div id=\"image\">
<p>Image</p>
</div>
<div id=\"link\">
<p>Link</p>
</div>
<div id=\"quote\">
<p>Quote</p>
</div>
<div id=\"status\">
<p>Status</p>
</div>
<div id=\"video\">
<p>Video</p>
</div>
</div>
解决方法
快速而肮脏:
(此外,假设[由于单选按钮]您一次只希望看到其中之一)
现场演示
为此,放弃所有单独的“ 3”功能:
$(\"input[name=post-format]\").click(function() {
var mydiv = $(this).attr(\'class\').replace(\'post-format-\',\'\');
$(\"#post_format_box div\").addClass(\"hidden\");
$(\"#post_format_box div#\"+mydiv).removeClass(\"hidden\");
});
请注意:我已将“ 5”属性添加到您的“单选”按钮中。
,html中的所有代码都使用类,其中js中的所有代码都使用id:
更改像thi这样的行,例如:
$( \"#post-format-status\" ).change( function() {
$( \"#status\" ).removeClass( \"hidden\" );
} );
成为:
$( \".post-format-status\" ).change( function() {
$( \"#status\" ).removeClass( \"hidden\" );
} );
也使用复选框而不是单选框进行切换
,尝试$(\"#postdivrich\").show();
和$(\"#postdivrich\").hide();
如果想花哨的话可以花10英镑和11英镑
或者,甚至可以用ѭ12
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。