ReferenceError:$未定义问题

时间:2014-02-19 15:53:44

标签: javascript jquery html

我刚收到控制台中的错误消息 参考错误:$未定义 。这就是为什么我的表单数据在点击无线电按钮后没有加载。你能告诉我代码中的问题吗?谢谢。

<form id='group'>
<label><input type="radio" name="group1" class="sim-micro-btn"/></label>
<label><input type="radio" name="group1" class="sim-mini-btn"/></label> 
<label><input type="radio" name="group1" class="sim-maxi-btn"/></label>
<label><input type="radio" name="group1" class="sim-mega-btn"/></label>
<label><input type="radio" name="group1" class="phone-smart-micro-btn"/></label>
<label><input type="radio" name="group1" class="phone-smart-mini-btn"/></label>
<label><input type="radio" name="group1" class="phone-smart-btn"/></label>
<label><input type="radio" name="group1" class="phone-smart-maxi-btn"/></label>
</form>

<div class="billpay-internet-add-ons">
  <div class="sim-micro-desktop">sim-micro</div>
  <div class="sim-mini-desktop">sim-mini</div>
  <div class="sim-maxi-desktop">sim-maxi</div>
  <div class="sim-mega-desktop">sim-mega</div>
  <div class="phone-smart-micro-desktop">phone-smart-micro</div>
  <div class="phone-smart-mini-desktop">phone-smart-mini</div>
  <div class="phone-smart-desktop">phone-smart</div>
  <div class="phone-smart-maxi-desktop">phone-smart-maxi</div>
</div>

<script>
$('form#group').click(function(e) {
    var className = e.target.className.replace('btn', 'desktop');    
    $('.' + className).show().siblings().hide();
});
</script>

3 个答案:

答案 0 :(得分:1)

您缺少对jQuery库的引用。

<小时/> 在使用jQuery

之前添加jQuery库
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>

<script>
$('form#group').click(function(e) {
    var className = e.target.className.replace('btn', 'desktop');    
    $('.' + className).show().siblings().hide();
});
</script>

答案 1 :(得分:1)

缺少jQuery库,只有在DOM准备就绪时才需要使用jQuery函数

将你的jscript替换为:

$(function() {
 $('form#group').click(function(e) {
     var className = e.target.className.replace('btn', 'desktop');    
     $('.' + className).show().siblings().hide();
 });
});

答案 2 :(得分:0)

似乎你错过了核心jQuery文件,你可以在使用jQuery代码之前添加这个脚本:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
    $(function() {
        $('form#group').click(function(e) {
            var className = e.target.className.replace('btn', 'desktop');    
            $('.' + className).show().siblings().hide();
        });
    })
</script>

您还需要将代码包装在DOM ready处理程序中,以确保在执行代码之前所有DOM元素都已就绪。