javascript - 使用单选按钮显示特定选项？

Question

我知道这个问题已经被回答过几次了，我也找到了答案。然而，该代码似乎不适用于我正在尝试制作的网站。它是一个静态页面，无需互联网即可工作。我想我缺少定义一些函数。请帮忙!

<form>
<input id="id_radio1" type="radio" name="name_radio1" value="value_radio1">Option1</input> 
<input id="id_radio2" type="radio" name="name_radio1" value="value_radio2">Option2</input>
<input id="id_radio3" type="radio" name="name_radio1" value="value_radio3">Option3</input>
<input id="id_radio4" type="radio" name="name_radio1" value="value_radio4">Option4</input>
<br>    
<div id="ar_1" style="display:none;">
<p>info for option1</p>
</div>
<div id="ar_2" style="display:none;">
<p>info for option2</p>
</div>
<div id="ar_3" style="display:none;">
<p>info for option3</p>
</div>
<div id="ar_4" style="display:none;">
<p>info for option4</p>
</div>
</form>
<script>
$(document).ready(function () {    
    $('#id_radio1').click(function () {
        $('#ar_1').show('fast');
        $('#ar_2').hide('fast');        
        $('#ar_3').hide('fast');
        $('#ar_4').hide('fast');
    });
    $('#id_radio2').click(function () {
        $('#ar_1').hide('fast');
        $('#ar_2').show('fast');
        $('#ar_3').hide('fast');
        $('#ar_4').hide('fast');
    });
     $('#id_radio3').click(function () {
        $('#ar_1').hide('fast');
        $('#ar_2').hide('fast');
        $('#ar_3').show('fast');
        $('#ar_4').hide('fast');
    })
     $('#id_radio4').click(function () {
        $('#ar_1').hide('fast');
        $('#ar_2').hide('fast');
        $('#ar_3').hide('fast');
        $('#ar_4').show('fast');
    })
});
</script>

Answer 1

从您的代码来看，您似乎正在使用 JQuery 库。但是，您在代码中的任何地方都没有导入该内容。让您的代码能够正常工作；您要么必须包含 JQuery 的本地副本(因为您没有 Internet 访问权限)，要么只是从托管服务器加载它(如果您有 Internet 访问权限)。 Quick-Test it Here .

JAVASCRIPT:

<!-- LOCAL JQUERY INCLUDED IN SCRIPT TAG FIRST -->
<script type="text/javascript" src="assets/js/jquery.js"></script>

<!-- OR PULLED FROM HOSTED CDN: DELETE THIS OPTION IF YOU HAVE NO INTERNET ACCESS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>


<script type="text/javascript">
    (function($){
        $(document).ready(function(evt){
            $('#id_radio1').click(function () {
                $('#ar_1').show('fast');
                $('#ar_2').hide('fast');
                $('#ar_3').hide('fast');
                $('#ar_4').hide('fast');
            });

            $('#id_radio2').click(function () {
                $('#ar_1').hide('fast');
                $('#ar_2').show('fast');
                $('#ar_3').hide('fast');
                $('#ar_4').hide('fast');
            });

            $('#id_radio3').click(function () {
                $('#ar_1').hide('fast');
                $('#ar_2').hide('fast');
                $('#ar_3').show('fast');
                $('#ar_4').hide('fast');
            });

            $('#id_radio4').click(function () {
                $('#ar_1').hide('fast');
                $('#ar_2').hide('fast');
                $('#ar_3').hide('fast');
                $('#ar_4').show('fast');
            })

        });
    })(jQuery);

</script>

HTML:

    <form>
        <input id="id_radio1" type="radio" name="name_radio1" value="value_radio1">Option1</input>
        <input id="id_radio2" type="radio" name="name_radio1" value="value_radio2">Option2</input>
        <input id="id_radio3" type="radio" name="name_radio1" value="value_radio3">Option3</input>
        <input id="id_radio4" type="radio" name="name_radio1" value="value_radio4">Option4</input>
        <br>
        <div id="ar_1" style="display:none;">
            <p>info for option1</p>
        </div>
        <div id="ar_2" style="display:none;">
            <p>info for option2</p>
        </div>
        <div id="ar_3" style="display:none;">
            <p>info for option3</p>
        </div>
        <div id="ar_4" style="display:none;">
            <p>info for option4</p>
        </div>
    </form>