【发布时间】：2015-06-19 06:34:45
【问题描述】：
我目前正在开发一个 Web 应用程序，并希望合并一个过滤器功能，该功能为用户使用多个选项，然后此过滤器会显示符合条件的 JSON 数组中的数据。我得到了一个公平的方法，但似乎无法让过滤正常工作，我认为问题可能出在 jQuery .each() 方法上。
非常感谢您的帮助！这是我目前拥有的。
提前致谢。
HTML 文件
<html>
<head>
<title>Test Filter</title>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="filter.js"></script>
</head>
<body>
<label for="weather">Gender</label>
<select id="weather" name="weather">
<option value="rain">Rain</option>
<option value="sun">Sun</option>
<option value="snow">Snow</option>
</select>
<label for="distance"></label>
<select id="distance" name="distance">
<option value="0-5 miles">0 - 5 miles</option>
<option value="6-10 miles">6 - 10 miles</option>
<option value="11-20 miles">11 - 20 miles</option>
<option value="21-25 miles">21 - 25 miles</option>
</select>
<label for="eventtype">Type of event</label>
<input id="eventtype" name="eventtype" type="text" />
<a id="calc" href="#" >Submit</a>
<div id="eventResult"></div>
</body>
JavaScript 文件
$(document).ready(function() {
var obj = {
"events": [
{
"location": "Sheffield",
"date": "May 13th, 2015",
"map": "img/leeds_town_hall.jpg",
"weather": "rain",
"distance": "0-5 miles",
"eventtype": "music"
},
{
"location": "Leeds",
"date": "May 13th, 2015",
"map": "img/leeds_town_hall.jpg",
"weather":"sun",
"distance":"6-10 miles",
"eventtype":"historical"
},
{
"location": "York",
"date": "May 13th, 2015",
"map": "img/leeds_town_hall.jpg",
"weather":"snow",
"distance":"11-20 miles",
"eventtype":"food"
},
{
"location": "Leeds Town Hall",
"date": "May 13th, 2015",
"map": "img/leeds_town_hall.jpg",
"weather":"rain",
"distance":"21-25 miles",
"eventtype":"arts"
},
{
"location": "Leeds Town Hall",
"date": "May 13th, 2015",
"map": "img/leeds_town_hall.jpg",
"weather":"sun",
"distance":"0-5 miles",
"eventtype":"music"
},
{
"location": "Leeds Town Hall",
"date": "May 13th, 2015",
"map": "img/leeds_town_hall.jpg",
"weather":"snow",
"distance":"0-5 miles",
"eventtype":"family"
}
]};
//Find the value when form is submitted
$('#calc').click(function(e) {
e.preventDefault();
var events = jQuery.grep(obj.events, function(element, index){
return element.weather && element.distance && element.eventtype; // retain appropriate elements
});
var selectedWeather = $('#weather').val().toString().toLowerCase(); //gender
var selectedDistance= $('#distance').val().toString().toLowerCase(); //amount
var selectedEventType = $('#eventtype').val().toString().toLowerCase(); //age
var distance = "";
$.each(events,function(k, v){
if( events[k].weather.toString().toLowerCase() == selectedWeather &&
events[k].distance.toString().toLowerCase() == selectedDistance &&
events[k].eventtype.toString().toLowerCase() == selectedEventType){
distance = events[k][selectedDistance];
}
});
//Empty the div
$('#eventResult').empty();
//Show the result in div
var displayText = "Event Type: " + selectedEventType + ", Weather: " + selectedWeather + ", Distance: " + distance + ", Price: element.price-from-json";
$("#eventResult").append(distance == "" ? "No Results" : displayText);
return false; //Stop page from reloading
});
});
【问题讨论】：
-
distance = events[k][selectedDistance];应该做什么？为什么要使用selectedDistance作为属性名称？ -
应该是
distance = events[k].location? -
comme "Empty the div" 后面的代码应该在循环之外。
-
现在您只显示过滤器匹配的最后一个事件。
-
我已经尝试
distance = events[k][selectedDistance];将数组中的值放入变量距离中。
标签： javascript jquery arrays json filtering