我正在为我的学校建造一个简单的床垫店。我需要按价格范围和硬度进行过滤。我对 items 对象进行了硬编码,并且需要对它们进行过滤。我只是想将其记录下来,以便我可以显示或隐藏它们。
$(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>
我尝试了多种方法,例如更改为所有 jquery 以及在函数中包含该对象。我还是新手,有什么帮助吗?
<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);