Question

有人可以解释为什么这个功能不起作用吗？

<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，但也单独测试了它。对不起是一个帮助吸血鬼 - 但我很难过，真的可以帮忙！

Answer 1

语法错误1 ，

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

在所有else if区块中添加空格。

语法错误2 ，

使用，

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

而不是

var radius = getElementById('#radius');

Answer 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()的返回类型是字符串

Answer 3

如果

，则在else之间添加空格

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

Answer 4

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

尝试：

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

此外，它是else if - 而不是elseif

Answer 5

你没有关闭submit（）函数，而且我想要一个更好的语法

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

Answer 6

这里的各种答案都集中在错误的不同方面（潜伏者：请赞成有用的人），所以我会在社区答案中总结出来：

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

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

这个jQuery函数有什么问题？

6 个答案: