我想链接我的两个过滤器,以获得特定的过滤器到我的谷歌地图过滤器,如果按类别的过滤器标记有值,我希望我的过滤器按类别从过滤器获取值按类别,然后结合我的按会话过滤。
这是我的代码,按类别和会话过滤:
// filter markers by category
filterMarkers = function (category) {
for (i = 0; i < gmarkers1.length; i++) {
marker = gmarkers1[i];
// If is same category or category not picked
if (marker.category == category || category.length === 0) {
marker.setVisible(true);
}
// categories don't match
else {
marker.setVisible(false);
}
}
}
// filter markers by session
filterMarkersx = function (session) {
for (i = 0; i < gmarkers1.length; i++) {
marker = gmarkers1[i];
// If is same session or session not picked
if (marker.session == session || session.length === 0) {
marker.setVisible(true);
}
// session don't match
else {
marker.setVisible(false);
}
}
}
这是我的选择选择代码来获取价值:
<div class="controls">Filter By :
<select id="type" onchange="filterMarkers(this.value);">
<option value="">Merchant Grub</option>
<option value="STARBUCKS">STARBUCKS</option>
<option value="SIMPLY">SIMPLY</option>
<option value="SHIHLIN">SHIHLIN</option>
<option value="RE JUVE">RE JUVE</option>
<option value="PUYO">PUYO</option>
<option value="LOTTERIA">LOTTERIA</option>
<option value="KFC">KFC</option>
<option value="HOP HOP">HOP HOP</option>
<option value="DOMINOS">DOMINOS</option>
<option value="CIRCLE K">CIRCLE K</option>
<option value="CHATIME">CHATIME</option>
<option value="CFC">CFC</option>
<option value="BURGER KING">BURGER KING</option>
<option value="BREADLIFE">BREADLIFE</option>
<option value="BAKMI GM">BAKMI GM</option>
<option value=" AUNTIE ANNE'S">AUNTIE ANNE'S</option>
</select>
</div>
<div class="controls">Filter By :
<select id="type" onchange="filterMarkersx(this.value);">
<option value="">IN SESSION</option>
<option value="false">FALSE</option>
<option value="">TRUE</option>
</select>
</div>
如何链接我的过滤器?
例如:如果我按类别在filter中选择星巴克,并且我在逐个会话中选择false,我可以获得值starbucks false session。
提前致谢,
裂缝
对我来说,这些函数filterMarkers
和filterMarkersx
并不是真正的“过滤器”,因为它们正在改变gmarkers
'项而不是返回此数组的子集。从过滤的角度来看,我会重写代码,例如:
// returns a filtering function to be passed to Array.prototype.filter parameterized with `category`
var filterByCategory = function (category) {
return function (marker) {
return !category.length || marker.category == category;
}
};
// returns a filtering function to be passed to Array.prototype.filter parameterized with `session`
var filterBySession = function (session) {
return function (marker) {
return !session.length || marker.session == session;
}
};
顺便说一下,由于这些功能完全相同,只是改变了被测试的属性,你可以将它们分解为:
var filterBy = function (name, object) {
return function (marker) {
return !object.length || marker[name] == object;
}
};
// set all visibility to false for starters
gmarkers.forEach(function (m) {
m.setVisible(false);
});
// apply chained filtering then set visibility to true on resulting subset
gmarkers
.filter(filterBy('category', category)) // or .filter(filterByCategory(category))
.filter(filterBy('session', session)) // or .filter(filterBySession(session))
.forEach(function (marker) {
marker.setVisible(true);
});
这样,您可以控制是链接过滤器还是仅使用其中一个过滤器。
现在我们已经有了逻辑,我们希望将这段代码连接到您的HTML。
让我们在函数中包含“2.使用过滤器”部分的代码:
// assuming vanilla JS: binding the function to `document`
// (the purpose is just to make it callable from the HTML)
document.setMarkersVisibility = function () {
// first, fetch data from both <select> (category and session)
var selectCategory = document.getElementById('selectcategory');
var selectSession = document.getElementById('selectsession');
var category = selectCategory.options[selectCategory.selectedIndex].value;
var session = selectSession .options[selectSession .selectedIndex].value;
/* INSERT PART 2. CODE HERE */
};
现在我们需要重构HTML,因为你的<select>
和id
都有相同的值,这是错误的。我们需要调用我们的新功能。鉴于上面的代码,我将它们命名为selectcategory
和selectsession
:
<select id="selectcategory" onchange="setMarkersVisibility()">
和
<select id="selectsession" onchange="setMarkersVisibility()">
这应该是所有需要的。