这个jQuery函数有什么问题？

-5

任何人都可以请解释为什么这个功能不起作用？这个jQuery函数有什么问题？

<form id="spot-search"> 
    <label for="text-basic">Postcode</label> 
    <input type="text" name="postcode" id="postcode" value=""> 
    </br> 
    <label for="slider">within mile radius</label> 
    <input type="range" name="radius" id="radius" value="50" min="0" max="200"> 
    </br> 
    <label>Select spot type</label> 
    <a href="#spot-type" data-role="button">All</a> 
    </br> 
    <input type="submit" value="Search"> 
</form> 

<div id="map1"> 
    map 1 goes here 
</div> 
<div id="map2"> 
    map 2 goes here 
</div> 
<div id="map3"> 
    map 3 goes here 
</div> 
<div id="map4"> 
    map 4 goes here 
</div> 
<div id="map5"> 
    map 5 goes here 
</div>

交房时应该运行这个功能：

$('#spot-search').submit(function(e) { 
    var radius = getElementById('#radius'); 

    if ($radius<=40) { 
     $('#spot-search').hide(); 
     $('#map1').show(); 
    } elseif($radius>40 && $radius<=80) { 
     $('#spot-search').hide(); 
     $('#map2').show(); 
    } elseif($radius>80 && $radius<=120) { 
     $('#spot-search').hide(); 
     $('#map3').show(); 
    } elseif($radius>120 && $radius<=160) { 
     $('#spot-search').hide(); 
     $('#map4').show(); 
    } elseif($radius>160 && $radius<=200) { 
     $('#spot-search').hide(); 
     $('#map5').show(); 
    } 
    e.preventDefault(); 
}

我使用jQuery移动，而且从测试这个独立。对不起，作为一个帮助吸血鬼 - 但我很难过，真的可以做一些帮助！

来源

2014-05-12 Jack Harding

尝试'document.getElementById'。你可以定义'radius'，但使用'$ radius'。 '$ radius'没有被定义。 – putvande

var radius = getElementById（'＃radius'）;如果你这样使用它，请移除散列标签var radius = getElementById（'radius'）;但如果你使用jQuery，为什么不使用var radius = $（'＃radius'）; ？ – caramba

三个答案，全部正确，全部不同并且全部不完整 - 因为该代码中存在（至少）三个不同的错误。 –

的各种答案在这里有所有的焦点都集中在不同的方面（潜伏者：请注意帮助者），所以我会在社区的答案总结起来：

这是else if（注意空格），而不是elseif。
您已使用变量名称radius，但引用它时使用$radius。要么没有问题，要选择一个并保持一致。我将使用radius。
而不是getElementById("#radius")，使用$("#radius")。（有两个不同的问题，第一个版本：1 getElementById是document，属性不是全局2.你不使用它一个选择，只是ID）。
您使用radius好像它是一个数字，但是它是一个对象（如果使用getElementById，则使用DOM元素，如果使用$()则为jQuery对象）。所以你也可能想要.val()。尽管当您执行诸如radius < 40之类的操作时，JavaScript会将字符串转换为数字，但通常最好明确地解析它。所以：
```
var radius = parseInt($("#radius").val(), 10); // 10 = base 10 
```
您还没有关闭调用submit，你需要一个);在你的代码的最后}后。

另外，如果你使用else if，你并不需要的后续条件初始radius >= XX &&部分。

来源

2014-05-12 11:48:30

语法错误1，

elseif($radius>40 && $radius<=80) { 
//--^

在这里所有的else if块添加一个空格。

语法错误2，

使用，

var radius =$('#radius').val();

，而不是其他人之间

var radius = getElementById('#radius');

来源

2014-05-12 11:21:18

添加空间，如果

$('#spot-search').submit(function (e) { 
    var radius = $('#radius').val(); 

    if ($radius <= 40) { 
     $('#spot-search').hide(); 
     $('#map1').show(); 
    } else if ($radius > 40 && $radius <= 80) { 
     $('#spot-search').hide(); 
     $('#map2').show(); 
    } else if ($radius > 80 && $radius <= 120) { 
     $('#spot-search').hide(); 
     $('#map3').show(); 
    } else if ($radius > 120 && $radius <= 160) { 
     $('#spot-search').hide(); 
     $('#map4').show(); 
    } else if ($radius > 160 && $radius <= 200) { 
     $('#spot-search').hide(); 
     $('#map5').show(); 
    } 
    e.preventDefault(); 
}

来源

2014-05-12 11:21:33 Balachandran

问题是此行var radius = getElementById('#radius');

应该

$('#spot-search').submit(function (e) { 
    var radius = parseInt($('#radius').val()); 

    if (radius <= 40) { 
     $('#spot-search').hide(); 
     $('#map1').show(); 
    } else if (radius > 40 && radius <= 80) { 
     $('#spot-search').hide(); 
     $('#map2').show(); 
    } else if (radius > 80 && radius <= 120) { 
     $('#spot-search').hide(); 
     $('#map3').show(); 
    } else if (radius > 120 && radius <= 160) { 
     $('#spot-search').hide(); 
     $('#map4').show(); 
    } else if (radius > 160 && radius <= 200) { 
     $('#spot-search').hide(); 
     $('#map5').show(); 
    } 
    e.preventDefault(); 
}

您需要使用parseInt因为.val()返回类型为字符串

来源

2014-05-12 11:21:36

你的变量名是radius，但你引用$radius。

尝试：

var $radius = $('#radius');

而且，else if - 不elseif

来源

2014-05-12 11:22:58 martynas

您还没有关闭提交（）函数和ELSEIF想要一个更好的较好语法

$('#spot-search').submit(function (e) { 
    var radius = $('#radius').val(); 

    if (radius <= 40) { 
     $('#spot-search').hide(); 
     $('#map1').show(); 
    } else if ((radius > 40) && (radius <= 80)) { 
     $('#spot-search').hide(); 
     $('#map2').show(); 
    } else if ((radius > 80) && (radius <= 120)) { 
     $('#spot-search').hide(); 
     $('#map3').show(); 
    } else if ((radius > 120) && (radius <= 160)) { 
     $('#spot-search').hide(); 
     $('#map4').show(); 
    } else if ((radius > 160) && (radius <= 200)) { 
     $('#spot-search').hide(); 
     $('#map5').show(); 
    } 
    e.preventDefault(); 
});

来源

2014-05-12 11:24:07

这个jQuery函数有什么问题？

回答

相关问题