个人中心
gpt4 book ai didi

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

转载 作者：行者123 更新时间：2023-12-03 01:06:33 25 4
gpt4 key购买 nike

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

25 4 0
文章推荐： javascript - JQuery 中的订单日期按升序排列
文章推荐： javascript - 链接两个元素，存储它们，并将它们发送到删除函数 - 纯 Javascript
文章推荐： javascript - React 中的 typescript : State will not be placed in the constructor will cause an error
文章推荐： javascript - 当通过 2 个组件传递 props 时，我失去了在数组上使用 .map 的能力
行者123
个人简介

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

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