使用带有下拉列表的事件监听器按属性对 objects 的数组进行排序

Question

所以我正在创建一个显示广告列表的视图。每个广告都是数组中的 object 并具有属性（标题、描述、日期等）我写了 javascript 以按顺序显示它们并创建了标题、描述、日期的下拉列表等，需要根据下拉列表中选择的属性对广告进行排序。我有一个按属性对 object 进行排序的函数，我想在每个选择的选项上都有事件监听器，但是我不确定如何实现它，因为我正在使用循环来显示所有广告 object。

<!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"));

Answer 1

您可以像这样尝试在您的 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 ",
    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 ",
    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 ",
    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 ",
    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>

Answer 2

我只会问问题的标题（编辑：您已经编辑了标题）。 DOM 的东西很简单（坦率地说，我过去几年没有用过它）。

按属性排序：

ads.sort((a, b) => a[selectedProp] > b[selectedProp] ? 1 : -1)

然后你应该以某种方式更新你的视图（不知道该怎么做，我被 angular、react 等框架宠坏了），可能使用 React 或 Vue.js。做一个循环是好的。你只是循环同一个数组。您唯一需要做的就是更新视图。

使用带有下拉列表的事件监听器按属性对 objects 的数组进行排序

Sorting an array of objects by property using eventlisteners with a dropdown list

javascript

arrays

sorting

object

event-listener

使用带有下拉列表的事件监听器按 属性 对 objects 的数组进行排序

Sorting an array of objects by property using eventlisteners with a dropdown list

javascript

arrays

sorting

object

event-listener

使用带有下拉列表的事件监听器按属性对 objects 的数组进行排序