jquery - переключает видимость div внутри div - PullRequest
Новая
       36

jquery - переключает видимость div внутри div

2 голосов
/ 14 апреля 2011

У меня проблема с функцией 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 ]

3 голосов
/ 14 апреля 2011

Быстро и грязно:

(Кроме того, предполагая [из-за переключателей), что вы хотите, чтобы только один из них был виден одновременно)

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Атрибут для ваших кнопок радио.

2 голосов
/ 14 апреля 2011

весь ваш код в html использует классы, где весь код в js использует ids:

измените строки, например thi, например: 

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

СТАТЬ: 

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

также используйте флажки, а не радио для переключения

1 голос
/ 14 апреля 2011

попробуй $("#postdivrich").show(); и $("#postdivrich").hide();

, если вы хотите получить фантазию, вы можете сделать $("#postdivrich").fadeIn(600); и $("#postdivrich").fadeOut(600);

Или вы можете даже использовать $.fadeToggle();

...