Question

我正在尝试使用此处提供的解决方案（谢谢stackoverflow :-)），但我无法在我的网站上使用它。目标是使用单选按钮，单击时将打开包含更多文本和复选框的div。为此我加入了jquery库：

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>

和脚本：

<script type="text/javascript">
    $(function() {
        $("[name=toggler]").click(function(){
                $('.toHide').hide();
                $("#blk-"+$(this).val()).show('slow');
        });
     });
</script>

在我的标题中。

这是代码：

<div style='padding-left:20px;'>
    <h2>Please select one of the following options: A, B or C</h2>
    <br>
    <br>
    <form name='wtfpol'>
        <label>
            <input type='radio' name='toggler' value='1' id='1' />OPTION A:</label>
        <br />
        <br>
        <label>
            <input type='radio' name='toggler' value='2' id='2' />OPTION B: >
        </label>
        <br />
        <br>
        <label>
            <input type='radio' name='toggler' value='3' id='3' />OPTION C: I</label>
        <br />
        <br>
</div>
<div id='blk-1' class='toHide' style='display:none; padding-left:20px;'>
    blah blah blah
</div>

<div id='blk-2' class='toHide' style='display:none; padding-left:20px;'>
    blah blah blah 2
</div>
<div id='blk-3' class='toHide' style='display:none; padding-left:20px;'>
    blah blah blah 2
</div>

我错过了什么？谢谢你的帮助！

Answer 1

您的代码确实有效，您只是不包含jQuery库！

https://jsfiddle.net/zhpwLoj5/

在HTML的开头添加jQuery：

<script src="https://code.jquery.com/jquery-2.2.2.min.js"></script>

Answer 2

你必须包含一个更高版本的Jquery，我想，这将有效..

<!doctype html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.js"></script>
<script type="text/javascript">
    $(function() {
        $("[name=toggler]").click(function(){
                $('.toHide').hide();
                $("#blk-"+$(this).val()).show('slow');
        });
     });
</script>
</head>
<body>
<div style='padding-left:20px;'>
<h2>Please select one of the following options: A, B or C</h2><br><br>
<form name='wtfpol'>
<label> <input type='radio' name='toggler' value='1' id='1' />OPTION A:</label><br /><br>
<label> <input type='radio' name='toggler' value='2' id='2' />OPTION B: 
</label><br /><br>
<label> <input type='radio' name='toggler' value='3' id='3' />OPTION C: I</label><br /><br>
</div>
<div id='blk-1' class='toHide' style='display:none; padding-left:20px;'>
blah blah blah
</div>

<div id='blk-2' class='toHide' style='display:none; padding-left:20px;'>
blah blah blah 2
</div>
<div id='blk-3' class='toHide' style='display:none; padding-left:20px;'>
blah blah blah 2
</div>
</body>
</html>

<div>标签的简单html / jquery问题

这是代码：

2 个答案: