因此，我正在创建一个显示广告列表的 View 。每个广告都是数组中的一个对象，并且具有属性(标题、描述、日期等)。我编写了 javascript 来按顺序显示它们，并创建了一个包含标题、描述、日期等的下拉列表，并且需要对这些属性进行排序根据下拉列表中选定的属性转换广告。我有一个按属性对对象进行排序的函数，并且我希望在每个选定的选项上都有事件监听器，但是我不确定如何实现它，因为我使用循环来显示所有广告对象。
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="sortList">
<select id="selectSort" onchange="myFunction()">
<option value="value1">value1
<option value="value2">value2
<option value="value3">value3
</select>
</div>
<div id="container"></div>
</body>
</html>
脚本
var array = [
{
value1: "this is an attribute", value2: "this is the second attribute", value3: "this is the 3rd attribute"
},
{
value1: "this is an attribute of 2nd object", value2: "this is the second attribute of 2nd object", value3: "this is the 3rd attribute of 2nd object"
},
{
value1: "this is an attribute of 2nd object", value2: "this is the second attribute of 2nd object", value3: "this is the 3rd attribute of 2nd object"
},
];
const container = document.getElementById("container");
for( { value1, value2, value3 } of array) {
const wrapper = document.createElement("div");
wrapper.className = "wrapper";
const first= document.createElement("h1");
first.textContent = value1;
const second= document.createElement("p");
second.textContent = value2;
const third= document.createElement("sub");
third.textContent = value3;
// append
wrapper.appendChild(first);
wrapper.appendChild(second);
wrapper.appendChild(third);
container.appendChild(wrapper);
}
//function that sorts ads by properties
function sortBy(property) {
var sortOrder = 1;
if(property[0] === "-") {
sortOrder = -1;
property = property.substr(1);
}
return function (a,b) {
var result = (a[property] < b[property]) ? -1 : (a[property] > b[property]) ? 1 : 0;
return result * sortOrder;
}
}
//I want to have eventlisteners on each option selected but then not sure how to implement this since I'm using a loop to display all the ads
array.sort(sortBy("value1"));
最佳答案
您可以尝试通过这种方式在 select 元素上添加事件监听器，然后在 myFunction() 上获取所选值。但在此之前，您必须先修改您的 option 值，这样才能在排序函数中轻松获取和使用它。
<select id="selectSort" onchange="myFunction(this.value)">
<option value="title">Title</option>
<option value="description">Description</option>
<option value="start_date">Start date</option>
<option value="end_date">End date</option>
<option value="offer">Most products</option>
<option value="num_of_products">Least products</option>
</select>
同时初始化container.innerHTML = '';的内容，它将帮助您在更改排序顺序后刷新您的div。我还包装了它的 bodyContent() 函数以实现代码的可重用性。希望这会有所帮助:) 请参阅您的 pen又来了
var ads = [{
title: "Photo Play Paper Collections",
description: "Don't miss these brand new Photo Play Paper Collections!",
start_date: "2018-09-01",
end_date: "2018-12-30",
offer: "50% Off",
num_of_products: 7
},
{
title: "Foil & Foiling Accessories",
description: "Once you add this color & shine to your paper, wood, fabric, or other porous surfaces you'll want to do it over and over again.",
start_date: "2018-08-01",
end_date: "2018-11-30",
offer: "Save $25",
num_of_products: 10
},
{
title: "The Halloween Shop",
description: "Shop all our spooky supplies in one place!",
start_date: "2018-09-01",
end_date: "2018-10-30",
offer: "35% Off",
num_of_products: 8
},
{
title: "Waffle Flower Crafts Stamps & Dies",
description: "We can't stop talking about these new Waffle Flower Stamps and Dies!",
start_date: "2018-09-01",
end_date: "2018-09-30",
offer: "Save $30",
num_of_products: 19
},
{
title: "Die Cutting & Embossing",
description: "Save on Die Cutting and Embossing Folders at Blitsy! Shop hundreds of amazing Dies and Embossing Folders from brilliant designers at Sizzix, Spellbinders, and CottageCutz (to name a few!)",
start_date: "2018-08-01",
end_date: "2018-12-30",
offer: "Save $50",
num_of_products: 23
},
{
title: "American Crafts Tools, Paper Collections & More",
description: "American Crafts prides themselves on innovation with their scrapbooking products. You can find crafting embellishments, stickers, and more.",
start_date: "2018-08-01",
end_date: "2018-11-30",
offer: "45% Off",
num_of_products: 35
},
{
title: "The Fall Shop!",
description: "The Fall Shop has everything you need for the upcoming season!",
start_date: "2018-09-01",
end_date: "2018-09-30",
offer: "60% Off",
num_of_products: 50
},
{
title: "Moxy Glitter, Embossing Powers, & More!",
description: "Eye catching glitters from this new brand by American Crafts!",
start_date: "2018-09-01",
end_date: "2018-09-30",
offer: "10% Off",
num_of_products: 24
},
{
title: "Brutus Monroe Stamps, Dies, Tools & More",
description: "On Sale Now! New Arrivals from Brutus Monroe",
start_date: "2018-08-01",
end_date: "2018-10-30",
offer: "Save $75",
num_of_products: 10
},
{
title: "Fiskars Tools & Accessories",
description: "Shop All the New Tools & Accessories that will make your life easier.",
start_date: "2018-08-01",
end_date: "2018-09-30",
offer: "15% Off",
num_of_products: 5
},
];
function bodyContent() {
const container = document.getElementById("container");
container.innerHTML = '';
for ({
title,
description,
start_date,
end_date,
offer,
num_of_products
} of ads) {
const wrapper = document.createElement("div");
wrapper.className = "wrapper";
const headline = document.createElement("h1");
headline.textContent = title;
const descrip = document.createElement("p");
descrip.textContent = description;
const dates = document.createElement("sub");
dates.textContent = "Offer valid " + start_date + " through " + end_date;
const discount = document.createElement("h2");
discount.textContent = offer;
const products = document.createElement("h4");
products.innerHTML = num_of_products + " items still available! <a href=#>Shop Now</a>";
// append
wrapper.appendChild(headline);
wrapper.appendChild(discount);
wrapper.appendChild(descrip);
wrapper.appendChild(products);
wrapper.appendChild(dates);
container.appendChild(wrapper);
}
}
bodyContent()
//function that sorts ads by properties
function sortBy(property) {
var sortOrder = 1;
if (property[0] === "-") {
sortOrder = -1;
property = property.substr(1);
}
return function(a, b) {
var result = (a[property] < b[property]) ? -1 : (a[property] > b[property]) ? 1 : 0;
return result * sortOrder;
}
}
//I want to have eventlisteners on each option selected but then not sure how to implement this since I'm using a loop to display all the ads
function myFunction(value) {
ads.sort(sortBy(value));
bodyContent()
}body {
font-family: Arial, Helvetica, sans-serif;
}
div {
margin: 5%;
}
.wrapper {
border: 2px solid #3abac4;
padding:5%;
}
h4 a {
text-decoration: none;
color: #fff;
background-color: #3abac4;
margin: 10px;
padding: 10px;
}
h4 a:hover {
color: #3abac4;
background-color: #fff;
border: 2px solid #3abac4;
}<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="sortList">
<select id="selectSort" onchange="myFunction(this.value)">
<option value="title">Title</option>
<option value="description">Description</option>
<option value="start_date">Start date</option>
<option value="end_date">End date</option>
<option value="offer">Most products</option>
<option value="num_of_products">Least products</option>
</select>
</div>
<div id="container"></div>
</body>
</html>关于javascript - 使用带有下拉列表的事件监听器按属性对对象数组进行排序，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52377644/