使用 JavaScript 更改事件偵聽器對產品列表進行排序

Question

我必須使用 JavaScript 對頁面中動態添加的產品列表進行排序。 條件在 HTML 值選項標簽中，我需要使用 JavaScript 更改事件偵聽器對它們進行排序。

產品清單：

const data = {
    items: [
        {
            name: "Soup",
            price: 10.45,
            image: "soup.jpg"
        },
        {
            name: "Stake",
            price: 11.35,
            image: "stake.jpg"
        },

        {
            name: "Salmon",
            price: 45.85,
            image: "salmon.jpg"
        },
        {
            name: "Banana cake",
            price: 12.85,
            image: "banana_cake.jpg"
        },
        {
            name: "Brioche",
            price: 9.55,
            image: "brioche.jpg"
        },
        {
            name: "Fruit cake",
            price: 32.55,
            image: "fruit_cake.jpg"
        }                
    ]
};

HTML：

<select name="sort" id="sort">
     <option value="cmpAscendingName">Ascending Name</option>
     <option value="cmpDescendingName">Descending Name</option>
     <option value="cmpPriceUp" selected>Price Up</option>
     <option value="cmpPriceDown">Price Down</option>
</select>

我的 JavaScript 代碼：

let sorting = document.querySelector('#sort');
let criteria = sorting.valueOf('option');

sorting.addEventListener('change', (event) => {
    function c(a, b){
        return a.items.price - b.items.price;
    }

});

Answer 1

你有幾個選擇。 如果你想保持 HTML 原樣，你可以有一個對象來告訴你每個值的含義（排序的“樣式”）：

const sortInformation = {
     cmpAscendingName: {
         prop: "name",
         direction: 1
     },
     cmpDescendingName: {
         prop: "name",
         direction: -1
     },
     cmpPriceUp: {
         prop: "price",
         direction: 1
     },
     cmpPriceDown: {
         prop: "price",
         direction: -1
     }
};

這會告訴您正在排序的屬性，以及它是升序 ( direction = 1 ) 還是降序 ( direction = -1 )。

然后要獲取特定樣式的排序信息（例如，對於"cmpAscendingName" ），您可以：

const sort = sortInformation[style];

有了這些信息，你可以這樣排序：

data.items.sort((a, b) => {
    // Get the values for the property
    const avalue = a[sort.prop];
    const bvalue = b[sort.prop];
    // Compare them
    let result;
    if (typeof avalue === "number") {
        result = avalue - bvalue;
    } else {
        result = String(avalue).localeCompare(bvalue);
    }
    // Return the result, adjusting for ascending/descending
    return sort.direction * result;
});

現場示例：

 const data = { items: [ { name: "Soup", price: 10.45, image: "soup.jpg" }, { name: "Stake", price: 11.35, image: "stake.jpg" }, { name: "Salmon", price: 45.85, image: "salmon.jpg" }, { name: "Banana cake", price: 12.85, image: "banana_cake.jpg" }, { name: "Brioche", price: 9.55, image: "brioche.jpg" }, { name: "Fruit cake", price: 32.55, image: "fruit_cake.jpg" } ] }; const sortInformation = { cmpAscendingName: { prop: "name", direction: 1 }, cmpDescendingName: { prop: "name", direction: -1 }, cmpPriceUp: { prop: "price", direction: 1 }, cmpPriceDown: { prop: "price", direction: -1 } }; let sorting = document.querySelector('#sort'); sortData(data, sorting.value); showData(data); sorting.addEventListener('change', (event) => { sortData(data, event.currentTarget.value); }); function sortData(data, style) { // Get the information for the style const sort = sortInformation[style]; if (sort) { data.items.sort((a, b) => { // Get the values for the property const avalue = a[sort.prop]; const bvalue = b[sort.prop]; // Compare them let result; if (typeof avalue === "number") { result = avalue - bvalue; } else { result = String(avalue).localeCompare(bvalue); } // Return the result, adjusting for ascending/descending return sort.direction * result; }); showData(data); } } function showData(data) { const div = document.getElementById("display"); div.innerHTML = "<ul>" + data.items.map(entry => { return `<li>${entry.name.replace(/&/g, "&amp;").replace(/</g, "&lt;")} - ${entry.price}</li>`; }).join("") "</ul>"; }

 <select name="sort" id="sort"> <option value="cmpAscendingName">Ascending Name</option> <option value="cmpDescendingName">Descending Name</option> <option value="cmpPriceUp" selected>Price Up</option> <option value="cmpPriceDown">Price Down</option> </select> <div id="display"></div>

另一種選擇是直接對option元素上的屬性名稱和方向進行排序，我最初認為您會想要這樣做，但是使用排序的“樣式”來做這件事對我來說越來越重要。 :-)

---

你在評論中說：

...我忘了說排序后我需要用產品的當前索引更新屬性“數據索引”

您沒有說要將該屬性放在哪個元素上，但是在對數組進行排序后，您可以使用

data.items.forEach((item, index) => {
    // ...use `item` and/or `index` here...
});

...並使用該index創建您可能需要的任何屬性。