更新示例:
您可以点击标记
按住 Ctrl 以选择多个选项
我更多地使用脚本,并将jQuery.inArray()
替换为array_diff()
函数作为if
内的测试语句。
我也改变了if
逻辑。我尝试了新的代码,过滤只是的房子,它似乎工作,但,当我为condos启用相同的过滤代码 - 过滤搞砸了一点。 / p>
例如:如果我从功能中选择所有内容 - 地图上不会显示任何内容。但是有些标记应该出现,因为我至少有两个标记具有三种可用功能。
$(markers.houses).each(function(index, elem) {
if ((array_diff(selectedFeatures, elem.features).length === 0) && (array_diff(selectedNearby, elem.nearby).length === 0)) {
if (!markers.houseMarkers[index].visible) {
markers.houseMarkers[index].setVisible(true);
}
}
});
$(markers.condos).each(function(index, elem) {
if ((array_diff(selectedFeatures, elem.features).length === 0) && (array_diff(selectedNearby, elem.nearby).length === 0)) {
if (!markers.condoMarkers[index].visible) {
markers.condoMarkers[index].setVisible(true);
}
}
});
图1.1 - 一系列房屋和公寓的过滤代码
答案 0 :(得分:1)
这里有一个拼写错误( selectedFeaturess )可能与它有关:
if (jQuery.inArray(selectedFeaturess[i], elem.features) !== -1 || jQuery.inArray(selectedFeatures[i], elem.features) > -1) {
这也无法帮助我怀疑:
<option value="Wendy's">Harveys</option>
这样的代码:
if (jQuery.inArray(selectedFeatures[i], elem.features) !== -1 || jQuery.inArray(selectedFeatures[i], elem.features) > -1) {
可以简化为:
if (jQuery.inArray(selectedFeatures[i], elem.features) !== -1) {
因为如果它是&gt; -1然后它是!== -1,所以第二个子句是多余的。例如如果你有= 0,那么IF子句的第一部分就会触发,不需要执行IF语句的第二部分。
最后,这里是你的$(document).ready()函数的重写。主要问题是如何循环遍历数组中的元素。而不是将它们视为jquery选择器并对它们执行.each(),您只需要执行一个简单的For循环。但是您可以使用jquery选择器来检查它们的长度。这对我有用(我在选项中也将Wendy改名为Harveys)。
$(document).ready(function() {
//$('#filter').on('click', function(e) {
$('#filter').click(function(e) {
// prevent refreshing of the page
e.preventDefault();
// close all infoWindows
infowindow.close();
// hide all markers
$(markers.houses).each(function(index, elem) {
markers.houseMarkers[index].setVisible(false);
});
$(markers.condos).each(function(index, elem) {
markers.condoMarkers[index].setVisible(false);
});
// get the selected features from select box
var selectedFeatures = $("#features").val();
var selectedNearby = $("#nearby").val();
// for each house element...
$(markers.houses).each(function(index, elem) {
//first filter by selected features
if ($(selectedFeatures).length) {
for (var i = 0; i < selectedFeatures.length; i++) {
if (jQuery.inArray(selectedFeatures[i], elem.features) !== -1) {
if (!markers.houseMarkers[index].visible) {
markers.houseMarkers[index].setVisible(true);
}
}
}
}
//then filter by nearby selections
if ($(selectedNearby).length) {
for (var i = 0; i < selectedNearby.length; i++) {
if (jQuery.inArray(selectedNearby[i], elem.nearby) !== -1) {
// if marker is not visible, but meets the filtering criteria - show it
// otherwise leave it as it is
if (!markers.houseMarkers[index].visible) {
markers.houseMarkers[index].setVisible(true);
}
}
}
}
});
// for each condo element...
$(markers.condos).each(function(index, elem) {
// first filter by selected features
if ($(selectedFeatures).length) {
for (var i = 0; i < selectedFeatures.length; i++) {
if (jQuery.inArray(selectedFeatures[i], elem.features) !== -1) {
// if marker is not visible, but meets the filtering criteria - show it
// otherwise leave it as it is
if (!markers.condoMarkers[index].visible) {
markers.condoMarkers[index].setVisible(true);
}
}
}
}
//then filter by nearby selections
if ($(selectedNearby).length) {
for (var i = 0; i < selectedNearby.length; i++) {
if (jQuery.inArray(selectedNearby[i], elem.nearby) !== -1) {
// if marker is not visible, but meets the filtering criteria - show it
// otherwise leave it as it is
if (!markers.condoMarkers[index].visible) {
markers.condoMarkers[index].setVisible(true);
}
}
}
}
});
});
});