Javascript 带有<；的简单html/jquery问题；部门>；标签_Javascript_Jquery_Html_Css_Forms

Javascript 带有<；的简单html/jquery问题；部门>；标签

javascript jquery html css forms

Javascript 带有<；的简单html/jquery问题；部门>；标签,javascript,jquery,html,css,forms,Javascript,Jquery,Html,Css,Forms,我正在尝试使用这里提供的解决方案（谢谢stackoverflow:-），但我无法让它在我的网站上运行。目标是拥有单选按钮，当点击时将打开一个包含更多文本和复选框的div。为此，我提供了jquery库： <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script> 还有剧本： <script type="text/javascript"> $(f

我正在尝试使用这里提供的解决方案（谢谢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>


$（函数（）{
$（“[name=toggler]”。单击（函数（）{
$（'.toHide'）.hide（）；
$（“#blk-”+$（this.val（））.show（'slow'）；
});
});

在我的头上

代码如下：


请选择以下选项之一：A、B或C




备选方案A：




选项B:>




备选案文C：I




废话废话
废话废话2
废话废话2

我错过了什么？

谢谢你的帮助

您的代码实际上可以工作，只是没有包括jQuery库

在HTML标题中添加jQuery：

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

我想，您必须包含更高版本的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>


$（函数（）{
$（“[name=toggler]”。单击（函数（）{
$（'.toHide'）.hide（）；
$（“#blk-”+$（this.val（））.show（'slow'）；
});
});
请选择以下选项之一：A、B或C


选项A:


备选案文B：



选项C:I


废话废话
废话废话2
废话废话2

你能在这把小提琴上演示一下吗？什么不起作用？您的站点中包括jQuery吗？在自定义脚本上方添加jQuery库。实际上，我包括以下内容：如果您查看我使用代码创建的JSFIDLE，它正在工作。我做到了！（谢谢）我甚至包括了我自己的代码（包括所有文本和内容，它也在工作…）我在文本下面有一些内容，这可能是一个问题吗？如果你的代码在本地不工作，那么很可能你有某种冲突，或者其他错误是的。

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