Question

我写了一个显示餐馆和酒吧的小应用程序。我想添加一个按类别过滤数据的函数。我从外部* .json文件中获取脚本中的数据。只有两个类别 - ＆＃34; bar＆＃34;和＆＃34;餐厅＆＃34;。

如果你能给我一些关于过滤现有元素的提示，我会非常感激。生成具有您想要仅显示条形的地方的卡片后，您可以单击按钮＆＃34; bar＆＃34;现场只有酒吧，餐厅是隐藏的。

function updateData() {

    var results = document.getElementById("results");

    for (var i = 0; i < places.length; i++) {
        results.innerHTML += '<div class="result text-center">' +
            '<img class="rest-img img-thumbnail" width="236" height="236" src="img/img1.jpg">' +
            '<h2 class="rest-name">' + places[i].name + '</h2>' +
            '<p class="rest-category">' + places[i].category + '</p>' +
            '<p class="rest-address">' + places[i].address + '</p>' +
            '<i class="fa fa-beer" aria-hidden="true"></i><p class="rest-beer-price">' + places[i].price + ' PLN</p>';
    }
}

function showBars() {
    //Code to filter bars
}

var warsaw = document.getElementById("warsaw");
warsaw.addEventListener("click", updateData);

非常感谢您的帮助！

Answer 1

最简单的是使用filter函数：

function filterByCategory(list, category) {
  return list.filter(function(item) {
    return (item.category === category);
  }); 
}

filter命令要求返回true以保留内容并将false排除。

Answer 2

为需要过滤的每个项目的根目录提供一个表示其类别的类。然后让results元素为应显示的每个类别添加或删除一个类。然后，只需添加一些CSS，只在results上存在相应的类时才显示元素的类别。

这种方法几乎不需要JS。更新显示由CSS完全处理。只需要在results上切换类。

document.getElementById("foo").addEventListener("click", function() {
  document.getElementById("results").classList.toggle("foo")
})
document.getElementById("bar").addEventListener("click", function() {
  document.getElementById("results").classList.toggle("bar")
})

#results .item {
  display: none;
}

#results.foo .fooCat {
  display: block;
  color: green;
}
#results.bar .barCat {
  display: block;
  color: blue;
}

<button id=foo>TOGGLE FOO</button>
<button id=bar>TOGGLE BAR</button>

<div id=results>
<p class="item fooCat">FOO ITEM</p>
<p class="item fooCat">FOO ITEM</p>
<p class="item barCat">BAR ITEM</p>
<p class="item fooCat">FOO ITEM</p>
<p class="item barCat">BAR ITEM</p>
<p class="item barCat">BAR ITEM</p>
<p class="item fooCat">FOO ITEM</p>
</div>

在网站上过滤数据的最佳方式

2 个答案: