Question

根据无线电选择切换div的最佳方法是什么？如果在开始时已经选择了任何无线电并且如果没有选择则隐藏所有div，我希望它进行切换。

我当前的代码只会进行更改（使用输入ID作为当前id的类名，如果有更好的方法，请说明）

$(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？

Answer 1

检查以下方法，它有1个限制，即无线电选项的值和每个出货desc的div id有关系。但我认为这应该不是问题。

此外，我更喜欢隐藏html / css中的所有desc，以便它不显示onload。

<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>

Answer 2

一旦页面加载它就正确将隐藏div。根据客户端计算机，您“不应该”在页面加载时看到图像。如果您担心div可见，最好在CSS中包含display:none。

至于你的转换问题，你需要设置两次

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

应该是让它运作的良好开端

jQuery - 基于无线电选择切换DIV

2 个答案: