首页 / 技术问答 / Javascript问答列表 / 问答详情

Javascript 我的控制台中没有显示任何来自过滤对象的内容

我正在为我的学校建造一个简单的床垫store .我需要根据价格范围和 Solidity 进行筛选.我有硬编码的项目对象，需要他们被过滤.我只是想把它记录下来，这样我就可以显示或隐藏它们.

$(document).ready(function() {
  $(".dropdown-trigger").dropdown().on("change", handleDropdownChange);
});

function handleDropdownChange(event) {
  const selectedOption = $(event.target).val();

  let filteredItems;

  if (selectedOption === "Soft") {
    filteredItems = Object.keys(items).filter(key => items[key].firmness === "soft");
  } else if (selectedOption === "Firm") {
    filteredItems = Object.keys(items).filter(key => items[key].firmness === "firm");
  } else if (selectedOption === "Price: Lowest-Highest") {
    filteredItems = Object.keys(items).sort((a, b) => items[a].price - items[b].price);
  } else if (selectedOption === "Price: Highest-Lowest") {
    filteredItems = Object.keys(items).sort((a, b) => items[b].price - items[a].price);
  } else {
    filteredItems = Object.keys(items);
  }

  console.log(filteredItems);
  // Use the filteredItems array to display the filtered items
  // displayFilteredItems(filteredItems);
}

var items = {
    "large-model-a1132v32023": {
      "title": "Nectar Premier King Size",
      "price": 1199.00,
      "image": "./assets/images/KingSizeEX1.jpg",
      "firmness": "medium"
    },
    "large-model-a1132v32024": {
      "title": "Helix Moonlight Luxe",
      "price": 2155.30,
      "image": "./assets/images/KingProduct2.jpg",
      "firmness": "soft"
    },
    "large-model-a1132v32025": {
      "title": "Purple Restore™ Hybrid Mattress",
      "price": 2595.00,
      "image": "./assets/images/KingProduct3.jpg",
      "firmness": "firm"
    },
    "queen-model-a1132v32024": {
      "title": "Brooklyn Bedding Signature Hybrid",
      "price": 1299.99,
      "image": "Queenphoto1 - instasize",
      "firmness": "soft"
    },
    "queen-model-a1132v32025": {
      "title": "The WinkBed",
      "price": 1499.99,
      "image": "queenphoto2 - instasize",
      "firmness": "firm"
    },
    "queen-model-a1132v32026": {
      "title": "Layla Hybrid Mattress",
      "price": 1699.99,
      "image": "assets/images/Queenphoto3 - instasize.webp",
      "firmness": "soft"
    },
    "twin-model-a1132v32024": {
      "title": "Bestselling T&N Mint Mattress",
      "price": 1095.00,
      "image": "add",
      "firmness": "medium"
    },
    "twin-model-a1132v32025": {
      "title": "Saatva Youth Mattress",
      "price": 795.00,
      "image": "add",
      "firmness": "medium"
    },
    "twin-model-a1132v32026": {
      "title": "Helix Sunset",
      "price": 936.30,
      "image": "add",
      "firmness": "soft"
    },
    "full-model-a1132v32024": {
      "title": "The Allswell",
      "price": 227.00,
      "image": "add",
      "firmness": "medium"
    },
    "full-model-a1132v32025": {
      "title": "Nectar Premier Copper 14",
      "price": 999.99,
      "image": "add",
      "firmness": "medium"
    },
    "full-model-a1132v32026": {
      "title": "Casper Element",
      "price": 506.00,
      "image": "add",
      "firmness": "medium"
    }
  };
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<ul id="dropdown1" class="dropdown-content">
    <li><a href="#!">Soft</a></li>
    <li class="divider"></li>
    <li><a href="#!">Firm</a></li>
    <li class="divider"></li>
    <li><a href="#!">Price: Lowest-Highest</a></li>
    <li class="divider"></li>
    <li><a href="#!">Price: Highest-Lowest</a></li>
</ul>

<!--Nav links left side-->
<ul id="nav-mobile" class="left hide-on-med-and-down">
    <li><a href="#kingSize">King Size</a></li>
    <li><a href="#queenSize">Queen Size</a></li>
    <li><a href="#twinSize">Twin Size</a></li>
    <li><a href="#fullSize">Full Size</a></li>
    <li><a href="#Aboutus">About us</a></li>
    <li><a class="dropdown-trigger" href="#!" data-target="dropdown1">Sort by</a></li>
</ul>

我try 了多种方法，比如更改为所有jQuery，并将对象包括在函数中.我还是个新手，有什么帮助吗？我正在使用materialized 的CSS，并必须为该等级的规格.https://materializecss.com/navbar.html我将他们的文档用于.dropdown()函数，如果没有它，我的导航栏将无法激活DropDown.谢谢.

推荐答案

我从未使用过jQuery或materialized css，但我非常确定jquiys on("event", xyz)函数在metrializecss-dropdown()函数上是不可用的，因为它没有绕过jquiys事件侦听器可以处理的事件.

我已经构建了一个解决方案，其中Dropwon-Function和您的handleDropdown Change在其各自的元素上分别被调用.

你的过滤选项(软的，坚定的，价格:最低-最高，价格:最高-最低)现在有一个自己的职业filterTrigger.

<ul id="dropdown1" class="dropdown-content">
  <li><a href="#!" class="filterTrigger">Soft</a></li>
  <li class="divider"></li>
  <li><a href="#!" class="filterTrigger">Firm</a></li>
  <li class="divider"></li>
  <li><a href="#!" class="filterTrigger">Price: Lowest-Highest</a></li>
  <li class="divider"></li>
  <li><a href="#!" class="filterTrigger">Price: Highest-Lowest</a></li>
</ul>

每个filterTrigger都有一个调用handleDropdownChange的EventListener. Note我没有使用.val()，因为它似乎没有返回任何有用的比较结果.我改用了.Text().

$(document).ready(function () {
  $(".dropdown-trigger").dropdown();
  $(".filterTrigger").each(function () {
    $(this).on("click", function () {
      handleDropdownChange($(this).text());
    });
  });
});

关于您的筛选逻辑: 在这种情况下，您将只获得物品标题的数组(例如[‘Large-Model-a1132v32025’，‘Queen-Model-a1132v32025’])

如果您需要包含数据( Solidity 度、价格等)的每个对象的数组，您可以使用Object.fromEntries(Object.entries(items).Filter()/.sort()上的筛选和排序函数)

https://masteringjs.io/tutorials/fundamentals/filter-key个

  if (selectedOption === "Soft") {
    filteredItems = Object.fromEntries(
      Object.entries(items).filter(
        ([key, value]) => value.firmness === "soft"
      )
    );
  } else if (selectedOption === "Firm") {
    filteredItems = Object.fromEntries(
      Object.entries(items).filter(
        ([key, value]) => value.firmness === "firm"
      )
    );
  } else if (selectedOption === "Price: Lowest-Highest") {
    filteredItems = Object.fromEntries(
      Object.entries(items).sort(([, a], [, b]) => a.price - b.price)
    );
  } else if (selectedOption === "Price: Highest-Lowest") {
    filteredItems = Object.fromEntries(
      Object.entries(items).sort(([, a], [, b]) => b.price - a.price)
    );
  } else {
    filteredItems = Object.keys(items);
  }

编辑: 这仅提供了过滤器or排序的解决方案.

我在第二个截图中添加了一个过滤器and排序的解决方案

看看代码片段.

Note在handleDropdownChange函数中，可以将参数直接传递到比较中.它不需要存储在额外的变量中.

筛选器or排序

$(document).ready(function () {
  $(".dropdown-trigger").dropdown();
  $(".filterTrigger").each(function () {
    $(this).on("click", function () {
      handleDropdownChange($(this).text());
    });
  });
});


function handleDropdownChange(selectedOption) {    
  let filteredItems;


  if (selectedOption === "Soft") {
    filteredItems = Object.fromEntries(
      Object.entries(items).filter(
        ([key, value]) => value.firmness === "soft"
      )
    );
  } else if (selectedOption === "Firm") {
    filteredItems = Object.fromEntries(
      Object.entries(items).filter(
        ([key, value]) => value.firmness === "firm"
      )
    );
  } else if (selectedOption === "Price: Lowest-Highest") {
    filteredItems = Object.fromEntries(
      Object.entries(items).sort(([, a], [, b]) => a.price - b.price)
    );
  } else if (selectedOption === "Price: Highest-Lowest") {
    filteredItems = Object.fromEntries(
      Object.entries(items).sort(([, a], [, b]) => b.price - a.price)
    );
  } else {
    filteredItems = Object.keys(items);
  }

  console.log(filteredItems);
  // Use the filteredItems array to display the filtered items
  // displayFilteredItems(filteredItems);
}

var items = {
  "large-model-a1132v32023": {
    title: "Nectar Premier King Size",
    price: 1199.0,
    image: "./assets/images/KingSizeEX1.jpg",
    firmness: "medium",
  },
  "large-model-a1132v32024": {
    title: "Helix Moonlight Luxe",
    price: 2155.3,
    image: "./assets/images/KingProduct2.jpg",
    firmness: "soft",
  },
  "large-model-a1132v32025": {
    title: "Purple Restore™ Hybrid Mattress",
    price: 2595.0,
    image: "./assets/images/KingProduct3.jpg",
    firmness: "firm",
  },
  "queen-model-a1132v32024": {
    title: "Brooklyn Bedding Signature Hybrid",
    price: 1299.99,
    image: "Queenphoto1 - instasize",
    firmness: "soft",
  },
  "queen-model-a1132v32025": {
    title: "The WinkBed",
    price: 1499.99,
    image: "queenphoto2 - instasize",
    firmness: "firm",
  },
  "queen-model-a1132v32026": {
    title: "Layla Hybrid Mattress",
    price: 1699.99,
    image: "assets/images/Queenphoto3 - instasize.webp",
    firmness: "soft",
  },
  "twin-model-a1132v32024": {
    title: "Bestselling T&N Mint Mattress",
    price: 1095.0,
    image: "add",
    firmness: "medium",
  },
  "twin-model-a1132v32025": {
    title: "Saatva Youth Mattress",
    price: 795.0,
    image: "add",
    firmness: "medium",
  },
  "twin-model-a1132v32026": {
    title: "Helix Sunset",
    price: 936.3,
    image: "add",
    firmness: "soft",
  },
  "full-model-a1132v32024": {
    title: "The Allswell",
    price: 227.0,
    image: "add",
    firmness: "medium",
  },
  "full-model-a1132v32025": {
    title: "Nectar Premier Copper 14",
    price: 999.99,
    image: "add",
    firmness: "medium",
  },
  "full-model-a1132v32026": {
    title: "Casper Element",
    price: 506.0,
    image: "add",
    firmness: "medium",
  },
};
  

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css"
    />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
  </head>
  <body>
    <ul id="dropdown1" class="dropdown-content">
      <li><a href="#!" class="filterTrigger">Soft</a></li>
      <li class="divider"></li>
      <li><a href="#!" class="filterTrigger">Firm</a></li>
      <li class="divider"></li>
      <li><a href="#!" class="filterTrigger">Price: Lowest-Highest</a></li>
      <li class="divider"></li>
      <li><a href="#!" class="filterTrigger">Price: Highest-Lowest</a></li>
    </ul>

    <!--Nav links left side-->
    <ul id="nav-mobile" class="left hide-on-med-and-down">
      <li><a href="#kingSize">King Size</a></li>
      <li><a href="#queenSize">Queen Size</a></li>
      <li><a href="#twinSize">Twin Size</a></li>
      <li><a href="#fullSize">Full Size</a></li>
      <li><a href="#Aboutus">About us</a></li>
      <li>
        <a class="dropdown-trigger" href="#!" data-target="dropdown1"
          >Sort by</a
        >
      </li>
    </ul>
  </body>
</html>

筛选器and排序

$(document).ready(function () {
      $(".dropdown-trigger").dropdown();
      $(".filterTrigger").each(function () {
        $(this).on("click", function () {
          filterItemsByFirmness($(this).text());
        });
      });
      $(".sortTrigger").each(function () {
        $(this).on("click", function () {
          sortItemsByPrice(items, filteredItems, $(this).text());
        });
      });
    });

    let filteredItems;

    function sortItemsByPrice(items, filteredItems, option) {
      let _items = filteredItems;
      if (filteredItems === undefined) {
        _items = items;
      }

      let sortedItems;
      if (option === "Price: Lowest-Highest") {
        sortedItems = Object.fromEntries(
          Object.entries(_items).sort(([, a], [, b]) => a.price - b.price)
        );
      }
      if (option === "Price: Highest-Lowest") {
        sortedItems = Object.fromEntries(
          Object.entries(_items).sort(([, a], [, b]) => b.price - a.price)
        );
      }
      console.log("sortedItems", sortedItems);
    }

    function filterItemsByFirmness(selectedOption) {
      if (selectedOption === "Soft") {
        filteredItems = Object.fromEntries(
          Object.entries(items).filter(
            ([key, value]) => value.firmness === "soft"
          )
        );
      } else if (selectedOption === "Firm") {
        filteredItems = Object.fromEntries(
          Object.entries(items).filter(
            ([key, value]) => value.firmness === "firm"
          )
        );
      } else {
        filteredItems = Object.keys(items);
      }

      console.log(filteredItems);
      // Use the filteredItems array to display the filtered items
      // displayFilteredItems(filteredItems);
    }

    var items = {
      "large-model-a1132v32023": {
        title: "Nectar Premier King Size",
        price: 1199.0,
        image: "./assets/images/KingSizeEX1.jpg",
        firmness: "medium",
      },
      "large-model-a1132v32024": {
        title: "Helix Moonlight Luxe",
        price: 2155.3,
        image: "./assets/images/KingProduct2.jpg",
        firmness: "soft",
      },
      "large-model-a1132v32025": {
        title: "Purple Restore™ Hybrid Mattress",
        price: 2595.0,
        image: "./assets/images/KingProduct3.jpg",
        firmness: "firm",
      },
      "queen-model-a1132v32024": {
        title: "Brooklyn Bedding Signature Hybrid",
        price: 1299.99,
        image: "Queenphoto1 - instasize",
        firmness: "soft",
      },
      "queen-model-a1132v32025": {
        title: "The WinkBed",
        price: 1499.99,
        image: "queenphoto2 - instasize",
        firmness: "firm",
      },
      "queen-model-a1132v32026": {
        title: "Layla Hybrid Mattress",
        price: 1699.99,
        image: "assets/images/Queenphoto3 - instasize.webp",
        firmness: "soft",
      },
      "twin-model-a1132v32024": {
        title: "Bestselling T&N Mint Mattress",
        price: 1095.0,
        image: "add",
        firmness: "medium",
      },
      "twin-model-a1132v32025": {
        title: "Saatva Youth Mattress",
        price: 795.0,
        image: "add",
        firmness: "medium",
      },
      "twin-model-a1132v32026": {
        title: "Helix Sunset",
        price: 936.3,
        image: "add",
        firmness: "soft",
      },
      "full-model-a1132v32024": {
        title: "The Allswell",
        price: 227.0,
        image: "add",
        firmness: "medium",
      },
      "full-model-a1132v32025": {
        title: "Nectar Premier Copper 14",
        price: 999.99,
        image: "add",
        firmness: "medium",
      },
      "full-model-a1132v32026": {
        title: "Casper Element",
        price: 506.0,
        image: "add",
        firmness: "medium",
      },
    };
  

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css"
    />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
  </head>
  <body>
    <ul id="dropdown1" class="dropdown-content">
      <li><a href="#!" class="filterTrigger">Soft</a></li>
      <li class="divider"></li>
      <li><a href="#!" class="filterTrigger">Firm</a></li>
      <li class="divider"></li>
      <li><a href="#!" class="sortTrigger">Price: Lowest-Highest</a></li>
      <li class="divider"></li>
      <li><a href="#!" class="sortTrigger">Price: Highest-Lowest</a></li>
    </ul>

    <!--Nav links left side-->
    <ul id="nav-mobile" class="left hide-on-med-and-down">
      <li><a href="#kingSize">King Size</a></li>
      <li><a href="#queenSize">Queen Size</a></li>
      <li><a href="#twinSize">Twin Size</a></li>
      <li><a href="#fullSize">Full Size</a></li>
      <li><a href="#Aboutus">About us</a></li>
      <li>
        <a class="dropdown-trigger" href="#!" data-target="dropdown1"
          >Sort by</a
        >
      </li>
    </ul>
  </body>
    </html>

Javascript相关问答推荐

有没有方法在Angular中的bowser选项卡之间移动HTML？

将下拉分区与工具提示结合起来

获取最接近的父项(即自定义元素)

如何将拖放功能添加到我已自定义为图像的文件输入HTML标签中？

如何使用侧边滚动按钮具体滚动每4个格？

警告！合同执行期间遇到错误[执行已恢复](Base Layer 2)

fs. writeFile()vs fs.writeFile()vs fs.appendFile()

通过嵌套模型对象进行Mongoose搜索

我应该绑定不影响状态的函数吗？'

如何修复我的js构建表每当我添加一个额外的列作为它的第一列？

如何修复(或忽略)HTML模板中的TypeScript错误？'

为什么Mutations 观察器用微任务队列而不是macrotask队列处理？

当输入字段无效时，我的应用程序不会返回错误

从页面到应用程序(NextJS)：REST.STATUS不是一个函数

如何在 Select 文本时停止Click事件？

AJAX POST在控制器中返回空(ASP.NET MVC)

我想使用GAS和HTML将从Electron 表格中获得的信息插入到文本字段的初始值中

在查看网页时，如何使HTML中的按钮工作方式类似于鼠标上的滚轮或箭头键？

通过跳过某些元素的对象进行映射

使用Reaction窗体挂钩注册日历组件

实用课程推荐
相关教程推荐
休闲君评测 |  TOOLFK工具网 |  古诗文网 |  良许Linux教程网 |  Python之禅 |  红色石头 |  入党申请书 | 

© 2020 Hi LearnFk 意见反馈 免责声明 关于我们 桂ICP备11002319号-3 友链&广告位+QQ: 1963612630