這個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函數有什麼問題？

回答

相關問題