jquery - 切换div内div的可见性

Question

我在使用 jQuery 函数时遇到问题。

情况

我有一个 div，包含 <input type="radio" /> 的列表元素。这些应该远程控制其他两个 div 的可见性。第一个 radio 输入字段在选中时应显示第一个 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>

Answer 1

快速而肮脏:

(此外，假设[由于单选按钮]您一次只需要其中 1 个可见)

<强> Live Demo

为此放弃所有单独的 .change() 函数:

$("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");
});

请注意:我已将 name 属性添加到您的单选按钮中。