Question

我想链接两个过滤器，以将特定过滤器链接到我的Google Map过滤器，如果按类别的过滤器标记具有值，我希望按会话过滤器从按类别的过滤器中获取值，然后结合我的会话过滤器。

这是我的代码，按类别和会话过滤：

Label

这是我的选择代码，以获取价值：

 // 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);
          }
      }
  }

如何链接两个过滤器？

例如：如果我在按类别过滤器中选择星巴克，并且在按会话过滤器中选择false，则可以得到值starbucks false session。

预先感谢

克拉肯

Answer 1

对我来说，这些函数filterMarkers和filterMarkersx并不是真正的“过滤器”，因为它们正在更改gmarkers'个项目，而不是返回此数组的子集。从过滤的角度来看，我将重写如下代码：

1。声明过滤功能

// 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;
  }
};

2。使用过滤器

// 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>的{{1}}值相同，这是错误的。我们需要调用我们的新函数。给定上面的代码，我将它们命名为id和selectcategory：

selectsession

和

<select id="selectcategory" onchange="setMarkersVisibility()">

这应该是所有需要的东西。

尝试链式过滤器选项选择

1 个答案:

1。声明过滤功能

2。使用过滤器

更新：用法的明确定义