Question

我遇到了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>

Answer 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属性添加到您的单选按钮。

Answer 2

html中的所有代码都使用类，其中js中的所有代码都使用id：

更改像thi这样的行，例如：

   $( "#post-format-status" ).change( function() {
            $( "#status" ).removeClass( "hidden" );
        } );

<强>变为：

    $( ".post-format-status" ).change( function() {
            $( "#status" ).removeClass( "hidden" );
        } );

也使用复选框而不是收音机来切换

Answer 3

尝试$("#postdivrich").show();和$("#postdivrich").hide();

如果你想获得幻想，你可以$("#postdivrich").fadeIn(600);和$("#postdivrich").fadeOut(600);

或者，您甚至可以使用$.fadeToggle();

jquery - 切换div中div的可见性

场合

问题

3 个答案: