jQuery - переключение DIV на основе выбора радио - PullRequest
Новая
       12

jQuery - переключение DIV на основе выбора радио

0 голосов
/ 28 декабря 2011

Как лучше всего переключать дивы в зависимости от выбора радиостанции? Я бы хотел, чтобы он переключился, если какие-либо радиостанции уже выбраны в начале, и скрыл все div, если выбора нет.

Мой текущий код включает только изменения (используя входной идентификатор в качестве имени класса идентификатора в настоящее время, если есть более эффективные методы, пожалуйста, так и скажите) 

$(function () {
    var shippDescriptions = $('div#shipping_descs > div');

    shippDescriptions.hide();

    $('input[type=radio]', '#shipping_inputs').change(function () {
        shippDescriptions.hide().filter('.' + $(this).attr('id')).show();
    });
});

Каков наилучший подход? Извлечь и установить код в change () на что-то и запустить его дважды?

Кроме того, это не будет скрывать div, пока страница не будет загружена правильно?

Ответы [ 2 ]

1 голос
/ 28 декабря 2011

Проверьте приведенный ниже подход. У него есть 1 ограничение на то, что значение параметров радиосвязи и идентификатора деления каждого отгрузки имеет отношение.но я считаю, что это не должно быть проблемой.

Также я предпочитаю скрывать все описания в html / css, чтобы они не отображали нагрузку. 

<html>
<head>
    <script src="jquery.js" type="text/javascript"></script>
    <script> 
        $(function () {
            var shippDescriptions = $('div#shipping_descs > div.shipping_desc');

            //one time - onload
            var selectedOption = $(':radio[name="r1"]:checked').val();              
            $('#S'+selectedOption).show();

            $('input[type=radio]', '#shipping_inputs').change(function () {

                //hide all shipping desc
                shippDescriptions.hide();

                //show shipping desc for selected option
                $('#S'+ $(this).val()).show();
            });
        });

    </script>
    <style>
        .hidden { display: none; }
    </style>
</head>
<body>
    <div id="shipping_inputs">
        <input type="radio" value="1" name="r1" />S1
        <input type="radio" value="2" name="r1" />S2
        <input type="radio" value="3" name="r1" checked="checked" />S3
        <input type="radio" value="4" name="r1" />S4
        <input type="radio" value="5" name="r1" />S5
    </div>
    <div id="shipping_descs" >
        <div id="S1" class="shipping_desc hidden" >S1 Desc</div>
        <div id="S2" class="shipping_desc hidden" >S2 Desc</div>
        <div id="S3" class="shipping_desc hidden" >S3 Desc</div>
        <div id="S4" class="shipping_desc hidden" >S4 D esc</div>
        <div id="S5" class="shipping_desc hidden" >S5 Desc</div>
    </div>
</body>

0 голосов
/ 28 декабря 2011

Ваше правильное значение при загрузке страницы будет скрывать div. В зависимости от клиентского компьютера вы не должны видеть изображение при загрузке страницы. может быть лучше включить display:none в ваш CSS для div, если вы обеспокоены тем, что он будет видимым.

Что касается вопроса о переключении, вам нужно задать его дважды 

$(function () {
    var shippDescriptions = $('div#shipping_descs > div');
    shippDescriptions.each(function(){
       if ($(this).attr('class') == $('input[type="radio"]:checked').attr('id'))
           $(this).show().siblings().hide();
    });
    $('input[type=radio]', '#shipping_inputs').change(function () {
       shippDescriptions.hide().filter('.' + $(this).attr('id')).show();
    });

Должно быть хорошее начало, чтобы это заработало

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...