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

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

转载作者：行者123 更新时间：2023-12-03 01:06:33

因此，我正在创建一个显示广告列表的 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/

文章推荐： javascript - JQuery 中的订单日期按升序排列

java - 对象 a = 对象 b；对象 a 会发生什么？
我的一位教授给了我们一些考试练习题，其中一个问题类似于下面(伪代码): a.setColor(blue); b.setColor(red); a = b; b.setColor(purple); b
JavaScript 测试(对象 && 对象 !== "null"&& 对象 !== "undefined")
我似乎经常使用这个测试 if( object && object !== "null" && object !== "undefined" ){ doSomething(); } 在对象上，我
C#对象/对象
C# Object/object 是值类型还是引用类型？我检查过它们可以保留引用，但是这个引用不能用于更改对象。 using System; class MyClass { public s
javascript - 通过ajax发送json - 对象 - 对象
我在通过 AJAX 发送 json 时遇到问题。 var data = [{"name": "Will", "surname": "Smith", "age": "40"},{"name": "Wil
javascript - 如何获取值[对象][对象]
当我尝试访问我的 View 中的对象 {{result}} 时(我从 Express js 服务器发送该对象)，它只显示 [object][object]有谁知道如何获取 JSON 格式的值吗？这是
java - 对象...对象[] 和格式
我有不同类型的数据(可能是字符串、整数......)。这是一个简单的例子: public static void main(String[] args) { before("one"); }
javascript - 如何修复[对象，对象]
嗨，我是 json 和 javascript 的新手。我在这个网站找到了使用json数据作为表格的方法。我很好奇为什么当我尝试使用 json 数据作为表时，我得到 [Object,Object]
JavaScript [对象][对象] 调试
已关闭。此问题需要 debugging details 。目前不接受答案。编辑问题以包含 desired behavior, a specific problem or error, and the
java - 对象==空或空==对象？
我听别人说 null == object 比 object == null check 例如: void m1(Object obj ) { if(null == obj) // Is thi
VBS教程：对象-Match 对象
Match 对象提供了对正则表达式匹配的只读属性的访问。说明 Match 对象只能通过 RegExp 对象的 Execute 方法来创建，该方法实际上返回了 Match 对象的集合。所有的
VBS教程：对象-Class 对象
Class 对象使用 Class 语句创建的对象。提供了对类的各种事件的访问。说明不允许显式地将一个变量声明为 Class 类型。在 VBScript 的上下文中，“类对象”一词指的是用
VBS教程：对象-Folder 对象
Folder 对象提供对文件夹所有属性的访问。说明以下代码举例说明如何获得 Folder 对象并查看它的属性： Function ShowDateCreated(f
VBS教程：对象-File 对象
File 对象提供对文件的所有属性的访问。说明以下代码举例说明如何获得一个 File 对象并查看它的属性： Function ShowDateCreated(fil
VBS教程：对象-Drive 对象
Drive 对象提供对磁盘驱动器或网络共享的属性的访问。说明以下代码举例说明如何使用 Drive 对象访问驱动器的属性： Function ShowFreeSpac
VBS教程：对象-FileSystemObject 对象
FileSystemObject 对象提供对计算机文件系统的访问。说明以下代码举例说明如何使用 FileSystemObject 对象返回一个 TextStream 对象，此对象可以被读
对象
我是 javascript OOP 的新手，我认为这是一个相对基本的问题，但我无法通过搜索网络找到任何帮助。我是否遗漏了什么，或者我只是以错误的方式解决了这个问题？这是我的示例代码: functio
对象
我可以很容易地创造出很多不同的对象。例如像这样: var myObject = { myFunction: function () { return ""; } };
对象
function Person(fname, lname) { this.fname = fname, this.lname = lname, this.getName = function()
javascript - JSON 返回(对象，对象)
任何人都可以向我解释为什么下面的代码给出 (object, Object) 吗？ (console.log(dope) 给出了它应该的内容，但在 JSON.stringify 和 JSON.parse
javascript - 返回 [对象，对象] 的工具提示
我正在尝试完成散点图 exercise来自免费代码营。然而，我现在只自己学习了 d3 几个小时，在遵循 lynda.com 的教程后，我一直在尝试确定如何在工具提示中显示特定数据。 This code

行者123

个人简介

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

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

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