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     

要回复问题请先登录注册