个人中心
gpt4 book ai didi

Nothing shows in my console from a filtered object(我的控制台中未显示任何来自已过滤对象的内容)

转载 作者：bug小助手 更新时间：2023-10-28 10:45:53 26 4
gpt4 key购买 nike



I am building a simple mattress shop for my school. I need to filter by price range and firmness. I have the items object hardcoded and need them to be filtered. I am just trying to get it logged so I can then display them or hide them.

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




$(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>




I've tried multiple things like changing to all jquery and also including the object within the function. I'm still new any help? I am using Materialize CSS and have to for the specifications of the grade. https://materializecss.com/navbar.html I used their docs for the .dropdown() function and my navbar wont activate the dropdown without it. Thanks.

我已经尝试了多种方法，比如全部改为jquery，并在函数中包含对象。我还是个新人，有什么可以帮忙的吗？我正在使用物化CSS，必须为等级的规格。https://materializecss.com/navbar.html我使用了他们的文档中的. js（）函数，如果没有它，我的导航栏将无法激活js。谢谢。


更多回答

The filtering looks OK to me. Have you tried console.log(selectedOption) to confirm that you're getting the selection correctly?

在我看来，过滤效果还可以。您有没有尝试过console.log(SeltedOption)以确认您获得的选择是正确的？

Are you sure the event handler is being called? I'm not familiar with .dropdown().

您确定正在调用事件处理程序吗？我不熟悉.DropDown()。

I'm never used jquery, but maybe you have to put () to your callback function $(".dropdown-trigger").dropdown().on("change", handleDropdownChange(this.event));

我从未使用过jQuery，但也许您必须将()放到您的回调函数$(“.dropdown-trigger”).dropdown().on(“change”，handleDropdown Change(this.Event)中)；

@ingoCollatz ... .on is jqueries kind of implementation of .addEventListener

@ingoCollatz....on是.addEventListener的jqueries实现

@ingoCollatz - you're not missing anything - jquery is for lazy coders :p

@ingoCollatz-您不会错过任何东西-jQuery是为懒惰的程序员准备的：p

优秀答案推荐

I never used jquery or materialize css but I'm pretty sure jquerys on("event", xyz) function is not usable on the metrializecss-dropdown()-function, as it does not bypass the event that jquerys eventlistener can handle.

我从未使用过jQuery或物化css，但我非常确定在metrializecss-dropdown()-函数上jquys on(“Event”，xyz)函数是不可用的，因为它没有绕过jQuery的EventListener可以处理的事件。


I have built a solution, where the dropwon-function and your handleDropdownChange are being called seperatly on its own elements.

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


Your filter-options (Soft, Firm, Price: Lowest-Highest, Price: Highest-Lowest) now have an own class filterTrigger.

您的过滤选项（软，坚定，价格：最低-最高，价格：最高-最低）现在有自己的类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>

Each filterTrigger gets an eventListener on which your handleDropdownChange is being called.
Note I didn't use .val() as it seems to return nothing useful for the comparison. I used .text() instead.

每个filterTrigger都获得一个事件Listener，在该事件Listener上调用handleDropdown Change。注意：我没有使用.val()，因为它似乎没有返回对比较有用的任何内容。我改用了.Text()。


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

Regarding your filterlogic:
On that way you will only get an array of the items title (e.g. ['large-model-a1132v32025', 'queen-model-a1132v32025'])

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


If you need an array of each object containing the data (firmness, price etc.) you can use the filter and sort function on Object.fromEntries(Object.entries(items).filter()/.sort())

如果您需要包含数据(坚固度、价格等)的每个对象的数组您可以在Object.fromEntries(Object.entries(items).filter()/.sort())上使用筛选和排序功能


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

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

Edit:
This only provides a solution for filter or sort.

编辑：这只提供了筛选或排序的解决方案。


i have added a solution for filter and sort in the second snipped

我在第二个片段中添加了一个筛选和排序解决方案


Checkout the code-snipped.

看看代码片段。


Note in your handleDropdownChange function, you can pass the parameter directly into the comparisons. It doesn't need to be stored in an extra variable.

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


filter or sort

筛选或排序




$(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>




Filter and sort

筛选和排序




$(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>





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


// css part
.isShow {
    display: none;
  }




// JS Part
$(document).ready(function () {
  // click .dropdown-trigger element, switch .opt(li element) hide or display 
  $(".dropdown-trigger").on("click", () => {
    $('.opt').toggleClass('isShow')
  });

  $('.opt').on('click', 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);


Your snippet seems not to be complete. The <ul> and <li> elements need to be turned into some kind of select elements. I have chosen to replace them with simple HTML <select> elements and concentrated on the filtering issue of your question.

您的代码片段似乎不完整。

    和
  • 元素需要转换为某种选择元素。我选择用简单的HTML
    •


I also turned your initial items object into an array. Arrays are easier to filter and map into HTML, as I have demonstrated below.

我还将初始的Items对象转换为数组。正如我在下面演示的那样，数组更容易过滤并映射到HTML中。


My snippet filters the itmes elements according to (max.) two criteria. Everything happens in the handleDropdownChange function:

我的代码段根据(max.)筛选itme元素有两个标准。所有事情都发生在handleDropdownChange函数中：




var items = Object.entries({"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"}})
  .map(([k,v,size,id])=>( // turn the object into an array of objects
  [size,id]=k.split("-model-"), {size, id, ...v} ));

$(document).ready(function() {
  function handleDropdownChange(ev){
    if (this.tagName=="BUTTON") { // toggle sort direction
      var txt=this.textContent=this.textContent.split(" ").reverse().join(" "),
       sign=txt[0]=="h"?1:-1; // get current sort direction ...
    }
    const [firm,size]=sels.map((i,sel)=>sel.value).toArray();
    $("#show").html(
     items.filter(itm=>itm.size.includes(size) && itm.firmness.includes(firm))
          .sort((a,b)=>sign*(b.price-a.price))
          .map(tableRow).join("\n")
    );
  }
  const sels=$("select.filt").on("change", handleDropdownChange),
        btn=$("#sortbtn").on("click",handleDropdownChange).click()

});

function tableRow(itm){
 return `<tr id="${itm.id}"><td>${itm.title}</td><td>${itm.size}</td><td>${itm.firmness}</td><td>${itm.price.toFixed(2)} $</td><td>${itm.image}</td></tr>`;
}

td:nth-child(4){text-align:right}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<select id="dropdown1" class="filt dropdown-content">
    <option value="soft">Soft</option>
    <option value="medium">Medium</option>
    <option value="firm">Firm</option>
    <option value="" selected>all</option>
</select>

<!--Nav links left side-->
<select id="nav-mobile" class="filt left hide-on-med-and-down">
    <option value="large">King Size</option>
    <option value="queen">Queen Size</option>
    <option value="twin">Twin Size</option>
    <option value="full">Full Size</option>
    <option value="" selected>all sizes</option>
</select> sort by price:
<button id="sortbtn">highest to lowest</button>

<table>
<thead>
<tr><th>title</th><th>size</th><th>firmness</th><th>price</th><th>image</th></tr>
</thead>
<tbody id="show"></tbody>
</table>




The sorting is now defined by another button (#sortbtn). Clicking on it will change the sort direction.

排序现在由另一个按钮(#sortbtn)定义。点击它将更改排序方向。


更多回答

You're a lifesaver! I was stuck on this for three days with no solution but this logs exactly what I need. Thank you for the useful description as well it helped me a lot since I've only been coding for a few months. Thanks again!

你真是救命稻草！我被困在这个问题上三天了，没有任何解决方案，但这个日志正是我需要的。谢谢你的有用的描述，它对我帮助很大，因为我只写了几个月的代码。再次感谢！

@gstroup11 i have updated my answer, as i only provided filtering OR sorting. The second code snippet provides a solution on filtering AND sorting the filtered objects.

@gstroup11我已经更新了我的答案，因为我只提供了过滤或排序。第二个代码片段提供了过滤和排序过滤对象的解决方案。

Seems to me on the "and Sorting", that the prices show in the same order. The first solution put them in the correct order, unless im misunderstanding something?

在我看来，在“和排序”，价格显示在同一顺序。第一个解决方案把它们放在正确的顺序，除非我误解了什么？

Don't just post code. Explain what they did wrong and how you solved it.

不要只是发布代码。解释他们做错了什么，以及你是如何解决的。

the questioner pointed out, he must use Materialize CSS and its .dropdown() function.

提问者指出，他必须使用MATERIALIZE CSS及其.dropdown()函数。

Also: King Size, Queen Size, Twin Size and Full Size don't seem to be filter-options, as they clearly are links pointing to another section of the website.

另外：大号、大号、双人号和全号似乎不是过滤选项，因为它们显然是指向网站另一部分的链接。

I must have missed that. Point taken. The post only seemed incomplete to me. :D

我一定是错过了。我明白了。这篇帖子在我看来只是不完整。：D

26 4 0
文章推荐： excel - 如何在 VBA 中检索工作表中格式化的 Excel 单元格值？
文章推荐： jquery - 格式化应该跨越多行的 jQuery 字符串
文章推荐： xml - Eclipse:保存时自动格式化 XML 文件
文章推荐： Javascript:格式化数字的更简单方法？
bug小助手
个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章
滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com