这个 jQuery 函数有什么问题？答案

【问题标题】：What's wrong with this jQuery function?这个 jQuery 函数有什么问题？
【发布时间】：2014-06-29 17:31:42
【问题描述】：

谁能解释一下为什么这个功能不起作用？

<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 mobile，但也对此进行了单独测试。很抱歉成为一个帮助吸血鬼 - 但我很难过，真的可以帮上忙！

【问题讨论】：

试试document.getElementById。你定义radius，但使用$radius。 $radius 未定义。
var radius = getElementById('#radius');如果您像这样使用它，请删除哈希标签 var radius = getElementById('radius');但是如果你使用 jQuery 为什么不 var radius = $('#radius'); ?
三个答案，全部正确，全部不同，全部不完整——因为该代码中（至少）存在三个不同的错误。
下次使用浏览器的控制台看看发生了什么。那里可能会弹出一些错误。
旁注：如果您使用的是else if，则您的以下条件中没有理由使用($radius > xx &&...

标签： jquery jquery-mobile

【解决方案1】：

语法错误 1，

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

在您的所有 else if 块中添加一个空格。

语法错误 2，

使用，

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

而不是

var radius = getElementById('#radius');

【讨论】：

【解决方案2】：

问题出在这行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()的返回类型是字符串

【讨论】：

【解决方案3】：

这里的各种答案都集中在问题的不同方面（潜伏者：请为有帮助的人投票），所以我将它们总结为社区答案：

是else if（注意空格），而不是elseif。
你使用了变量名radius，但是在引用它时你使用了$radius。两者都可以，选择一个并保持一致。我将使用radius。
使用$("#radius") 代替getElementById("#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 && 部分。

【讨论】：

【解决方案4】：

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

试试：

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

另外，它是else if - 不是elseif

【讨论】：

【解决方案5】：

你还没有关闭 submit() 函数，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();
});

【讨论】：

【解决方案6】：

在 else if 之间加空格

$('#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();
}

【讨论】：