时间戳

首页 > 解决方案 > 过滤掉并动态更改附加结果？

javascript - 过滤掉并动态更改附加结果？

问题描述

我将尝试尽可能简单地解释这一点。

我有一个来自对象的数据列表，如下所示：

let burgers = [
   {
       "storeSpace": "Open Space",
       "storeName": "Five Guys",
         "storeImage": "images/burgers/five-guys.png",
         "storeLocation": "865 York Mills Rd, North York, ON M3B 1Y6",
         "storeHours": "Hours: 11:00AM - 10:00PM"
     },
    {
        "storeSpace": "Crowded",
         "storeName": "Rudy",
        "storeImage": "images/burgers/rudy.png",
        "storeLocation": "619 College St, Toronto, ON M6G 1B5",
         "storeHours": "Hours: 11:00AM - 10:00PM"
      },
      {
         "storeSpace": "Crowded",
         "storeName": "The Burger's Priest",
         "storeImage": "images/burgers/burger-priest.png",
        "storeLocation": "463 Queen St W, Toronto, ON M5V 2A9",
         "storeHours": "Hours: 11:00AM - 10:00PM",
         "pricing": true
      },
      {
         "storeSpace": "Open Space",
        "storeName": "Le Swan",
        "storeImage": "images/burgers/le-swan.png",
        "storeLocation": "892 Queen St W, Toronto, ON M6J 1G3",
         "storeHours": "Hours: 11:00AM - 10:00PM",
         "pricing": true
     },
     {
         "storeSpace": "Open Space",
         "storeName": "Le Swan",
         "storeImage": "images/burgers/le-swan.png",
         "storeLocation": "892 Queen St W, Toronto, ON M6J 1G3",
         "storeHours": "Hours: 11:00AM - 10:00PM"
      }
]

并且该信息通过如下所示的空 html 字符串显示：

var html = '';
function displayItems(obj, parent){
         var uniqueID = 0;
        obj.forEach(function(val){
            html += '<div class="food-section" onclick="compareModule(\'compare-food-gui\')" compare_id=' + uniqueID + '>';
            html += '<div class="food-thumb">';
            html += '<img src="'+ val.storeImage +'" width="168" height="112"/>';
            html += '</div>';
            html += '<div class="food-info" compare_id=' + uniqueID + '>';
            html += '<p class="store-capacity">'+ val.storeSpace +'</p>';
            html += '<img src="images/star-filled.png" height="17" width="17" class="store-rating"/>';
            html += '<img src="images/star-filled.png" height="17" width="17" class="store-rating"/>';
            html += '<img src="images/star-filled.png" height="17" width="17" class="store-rating"/>';
            html += '<img src="images/star-filled.png" height="17" width="17" class="store-rating"/>';
            html += '<img src="images/star-unfilled.png" height="17" width="17" class="store-rating"/>';
            html += '<p id="store-name" compare_id=' + uniqueID + '>'+ val.storeName +'</p>';
            html += '<p class="store-desc" compare_id=' + uniqueID + '>'+ val.storeLocation +'</p>';
            html += ' <p class="store-desc">Hours: 11:00AM - 10:00PM</p>';
            html += '</div>';
            html += '</div>';
        });
         let div = document.createElement('div');
         div.classList.add('cart-item');
         div.innerHTML = html;
         document.getElementById(parent).appendChild(div);
 }
 displayItems(burgers,"burgers");

现在我有一个过滤器检查按钮列表，当我单击一个特定的按钮时，我想动态返回一个新的项目列表并实时运行。

这些按钮以图形方式看起来像：https ://imgur.com/a/CJ7deAM

代码是

<div class="filter-panel" id="filter-trigger">
                <h1>Pricing</h1>
                <label class="container"> Under $5.00
                    <input type="checkbox" id="under5" onclick="displayItems(burgers,'burgers', 'underfive')">
                    <span class="checkmark"></span>
                </label>
                <label class="container"> $5.00 - $27.00
                    <input type="checkbox" id="fiveto27" onclick="fiveToTwentySeven(burgers,'burgers')">
                    <span class="checkmark"></span>
                </label>
                <label class="container"> Over $27.00
                    <input type="checkbox">
                    <span class="checkmark"></span>
                </label>

                <h1>Portion Size</h1>
                <label class="container"> Under $5.00
                    <input type="checkbox">
                    <span class="checkmark"></span>
                </label>
                <label class="container"> $5.00 - $27.00
                    <input type="checkbox">
                    <span class="checkmark"></span>
                </label>
                <label class="container"> Over $27.00
                    <input type="checkbox">
                    <span class="checkmark"></span>
                </label>

                <h1>Rating</h1>
                <label class="container"> Under $5.00
                    <input type="checkbox">
                    <span class="checkmark"></span>
                </label>
                <label class="container"> $5.00 - $27.00
                    <input type="checkbox">
                    <span class="checkmark"></span>
                </label>
                <label class="container"> Over $27.00
                    <input type="checkbox">
                    <span class="checkmark"></span>
                </label>

                <button id="filterBtn" class="confirm-btn-large">Show all 35 stores</button>
            </div>

我尝试了许多不同的方法，但没有得到正确的结果。我怎样才能实现我的要求？我希望根据单击要过滤的选项来简单地更新结果。

以图形方式显示结果的图像：https ://i.imgur.com/LpCHaPJ.png

更新：（我尝试过但没有帮助）：

function displayItems(obj, parent, t){
         var t = t;
            if(obj[y].pricing === t){

所以我设置它来检查定价是否等于 t 类型意味着一种过滤器选项。在这种情况下，“五岁以下”的意思是，低于 5 美元的物品。

接下来，我在其中一个项目中的对象中添加了 ""pricing": "overfive""。

然后在html中，我添加了

onclick="displayItems(burgers,'burgers', 'underfive')">

那是在过滤器按钮旁边，如果我点击它；它确实会相应地过滤掉结果，但是我将如何为每一次更改进行管理？

我将不得不为 html 结果编写重复的代码大约 10 次。所以我知道这不是正确的解决方案。

就像我很确定我不应该写

if(x = 1){ 复制粘贴结果代码 }

else if(x = 2){ 复制粘贴结果代码 }

等等等等。我想要一个可以动态执行的功能。

标签： javascripthtml

解决方案

您需要为每个汉堡项目提供价格、评级和大小属性，以便可以将其过滤掉。

需要一个全局filters对象/数据来跟踪您的过滤器。根据您的代码段，您的渲染功能已被修改为过滤汉堡（如果有任何过滤器），并且在渲染burgers元素之前它需要清除之前的所有内容。

单击复选框时，它将更改全局filters对象并调用渲染函数。

let burgers = [
   {
       "storeSpace": "Open Space",
       "storeName": "Five Guys",
         "storeImage": "https://www.seriouseats.com/recipes/images/2015/07/20150702-sous-vide-hamburger-anova-primary-1500x1125.jpg",
         "storeLocation": "865 York Mills Rd, North York, ON M3B 1Y6",
         "storeHours": "Hours: 11:00AM - 10:00PM",
         "price": "underfive"
     },
    {
        "storeSpace": "Crowded",
         "storeName": "Rudy",
        "storeImage": "images/burgers/rudy.png",
        "storeLocation": "619 College St, Toronto, ON M6G 1B5",
         "storeHours": "Hours: 11:00AM - 10:00PM",
        "price":"fiveToTwentySeven"
      },
      {
         "storeSpace": "Crowded",
         "storeName": "The Burger's Priest",
         "storeImage": "images/burgers/burger-priest.png",
        "storeLocation": "463 Queen St W, Toronto, ON M5V 2A9",
         "storeHours": "Hours: 11:00AM - 10:00PM",
         "pricing": true
      },
      {
         "storeSpace": "Open Space",
        "storeName": "Le Swan",
        "storeImage": "images/burgers/le-swan.png",
        "storeLocation": "892 Queen St W, Toronto, ON M6J 1G3",
         "storeHours": "Hours: 11:00AM - 10:00PM",
         "pricing": true
     },
     {
         "storeSpace": "Open Space",
         "storeName": "Le Swan",
         "storeImage": "images/burgers/le-swan.png",
         "storeLocation": "892 Queen St W, Toronto, ON M6J 1G3",
         "storeHours": "Hours: 11:00AM - 10:00PM"
      }
]
// a global filter variable
var filters = {
  price: [],
  size: [],
  rating: []
}   
function changefilter(type,value, checked){
  // if checked changes
  // if checked == true add to global filter object
  // else remove from global filter object
  if(checked) filters[type].push(value)
  else filters[type].splice(filters[type].indexOf(value),1)
  displayItems(burgers,"burgers",filters)
}

function displayItems(obj, parent, myfilter){
        // if filter exists then filter the burgers first
         var filteredBurgers = obj.filter(burger =>
            Object.keys(myfilter).every(
                key => myfilter[key].length === 0 || myfilter[key].includes(burger[key])
            )
        )
         // clear conents of parent element before rendering item
         document.getElementById(parent).innerHTML = ''
         var html = '';
         var uniqueID = 0;
         filteredBurgers.forEach(function(val){
            html += '<div class="food-section" onclick="compareModule(\'compare-food-gui\')" compare_id=' + uniqueID + '>';
            html += '<div class="food-thumb">';
            html += '<img src="'+ val.storeImage +'" width="168" height="112"/>';
            html += '</div>';
            html += '<div class="food-info" compare_id=' + uniqueID + '>';
            html += '<p class="store-capacity">'+ val.storeSpace +'</p>';
            html += '<img src="images/star-filled.png" height="17" width="17" class="store-rating"/>';
            html += '<img src="images/star-filled.png" height="17" width="17" class="store-rating"/>';
            html += '<img src="images/star-filled.png" height="17" width="17" class="store-rating"/>';
            html += '<img src="images/star-filled.png" height="17" width="17" class="store-rating"/>';
            html += '<img src="images/star-unfilled.png" height="17" width="17" class="store-rating"/>';
            html += '<p id="store-name" compare_id=' + uniqueID + '>'+ val.storeName +'</p>';
            html += '<p class="store-desc" compare_id=' + uniqueID + '>'+ val.storeLocation +'</p>';
            html += ' <p class="store-desc">Hours: 11:00AM - 10:00PM</p>';
            html += '</div>';
            html += '</div>';
        });
         let div = document.createElement('div');
         div.classList.add('cart-item');
         div.innerHTML = html;
         document.getElementById(parent).appendChild(div);
 }
 displayItems(burgers,"burgers", filters);
<div class="filter-panel" id="filter-trigger">
    <h1>Pricing</h1>
    <label class="container"> Under $5.00
        <input type="checkbox" id="under5" onchange="changefilter('price','underfive', this.checked)">
        <span class="checkmark"></span>
    </label>
    <label class="container"> $5.00 - $27.00
        <input type="checkbox" id="fiveto27" onclick="changefilter('price','fiveToTwentySeven', this.checked)">
        <span class="checkmark"></span>
    </label>
    <label class="container"> Over $27.00
        <input type="checkbox">
        <span class="checkmark"></span>
    </label>

    <h1>Portion Size</h1>
    <label class="container"> Under $5.00
        <input type="checkbox">
        <span class="checkmark"></span>
    </label>
    <label class="container"> $5.00 - $27.00
        <input type="checkbox">
        <span class="checkmark"></span>
    </label>
    <label class="container"> Over $27.00
        <input type="checkbox">
        <span class="checkmark"></span>
    </label>

    <h1>Rating</h1>
    <label class="container"> Under $5.00
        <input type="checkbox">
        <span class="checkmark"></span>
    </label>
    <label class="container"> $5.00 - $27.00
        <input type="checkbox">
        <span class="checkmark"></span>
    </label>
    <label class="container"> Over $27.00
        <input type="checkbox">
        <span class="checkmark"></span>
    </label>

    <button id="filterBtn" class="confirm-btn-large">Show all 35 stores</button>
</div>
  <div id="burgers"></div>

推荐阅读