如何反转一组按日期排序的对象的顺序？

Question

我能够按日期正确地对下面列表中的对象进行排序。我还希望能够在单击按钮时以相反的顺序对它们进行排序。

如何在点击时对对象进行反向排序？

//array of objects
const cards = [
  {
    title: 'One Fish',
    sub: '(hover me)',
    isGreen: true,
    datePub: `November 11, 2021`
  },
  {
    title: 'Two Fish',
    sub: '(hover me)',
    isGreen: false,
    datePub: `November 11, 2020`
  },
  {
    title: 'Red Fish',
    sub: '(hover me)',
    isGreen: true,
    datePub: `December 21, 2021`
  },
  {
    title: 'Blue Fish',
    sub: '(hover me)',
    isGreen: true,
    datePub: `January 11, 2019`
  },
  {
    title: 'By Dr. Seuss',
    sub: '(hover me)',
    isGreen: false,
    datePub: `March 05, 2018`
  }  
];

//sorts by year, then month, then day
cards.sort((a, b) => new Date(b.datePub) - new Date(a.datePub));

//reverses date order on click
reverse.addEventListener('click', function() {
  cards.sort((b, a) => new Date(a.datePub) - new Date(b.datePub));
});

//create html
let cardsTemplate = (cardData) => {
  return `
    <div class="card ${cardData.isGreen ? `green` : ``}">
      <h2>${cardData.title}</h2>
      <h4>${cardData.sub}</h4>
      <p>${cardData.datePub}</p>
    </div>  
  `;  
}

//output
cardGroup.innerHTML = `
  ${cards.map(cardsTemplate).join('')}
`;

.container {
  display: flex;
  flex-direction: row;
  padding: 0.5rem;
}

.card {
  display: flex;
  justify-content: center;
  align-items: center;
  background: lightblue;
  flex-wrap: wrap;
  flex-direction: column;
  margin: 0 0.5em;
  padding: 0.5em;
  border-radius: 4px;
  transition: all 0.3s ease-in-out;
}
.card.green {
  background: lightgreen;
}
.card:hover {
  background: darkblue;
  color: white;
  cursor: pointer;
}

<div class="container" id="cardGroup"></div>
<button type="button" id="reverse">Reverse Order</button>

Answer 1

您需要在比较函数中交换 a 和 b 并重新渲染您的 HTML。

reverse.addEventListener('click', function() {
  cards.sort((a, b) => new Date(a.datePub) - new Date(b.datePub));

  cardGroup.innerHTML = `
    ${cards.map(cardsTemplate).join('')}
  `;
});

Answer 2

将所有内容包装在外部函数中，并让按钮切换一个类：.reverse，它决定了事件处理程序如何对数组进行排序。

const cards = [{
    title: 'One Fish',
    sub: '(hover me)',
    isGreen: true,
    datePub: `November 11, 2021`
  },
  {
    title: 'Two Fish',
    sub: '(hover me)',
    isGreen: false,
    datePub: `November 11, 2020`
  },
  {
    title: 'Red Fish',
    sub: '(hover me)',
    isGreen: true,
    datePub: `December 21, 2021`
  },
  {
    title: 'Blue Fish',
    sub: '(hover me)',
    isGreen: true,
    datePub: `January 11, 2019`
  },
  {
    title: 'By Dr. Seuss',
    sub: '(hover me)',
    isGreen: false,
    datePub: `March 05, 2018`
  }
];

function main(array) {
  const cG = document.querySelector('#cardGroup');
  const toggle = document.querySelector('#toggle');

  const dateOrd = array => array.sort((a, b) => new Date(a.datePub) - new Date(b.datePub));

  const dateRev = array => array.sort((a, b) => new Date(b.datePub) - new Date(a.datePub));

  const buildDeck = array => {
    cG.innerHTML = '';
    array.forEach(obj => {
      cG.insertAdjacentHTML('beforeEnd', `<div class="card ${obj.isGreen ? `green` : ``}"><h2>${obj.title}</h2><h4>${obj.sub}</h4><p>${obj.datePub}</p></div>`);
    });
  };

  toggle.addEventListener('click', function() {
    this.classList.toggle('reverse');
    let data;
    if (this.classList.contains('reverse')) {
      data = dateOrd(array);
    } else {
      data = dateRev(array);
    }
    buildDeck(data);
  });
  buildDeck(dateOrd(array));
  toggle.classList.toggle('reverse');
};

main(cards);

.container {
  display: flex;
  flex-direction: row;
  padding: 0.5rem;
}

.card {
  display: flex;
  justify-content: center;
  align-items: center;
  background: lightblue;
  flex-wrap: wrap;
  flex-direction: column;
  margin: 0 0.5em;
  padding: 0.5em;
  border-radius: 4px;
  transition: all 0.3s ease-in-out;
}

.card.green {
  background: lightgreen;
}

.card:hover {
  background: darkblue;
  color: white;
  cursor: pointer;
}

#toggle {
  display: inline-block;
  width: 150px;
  cursor: pointer;
}
#toggle.reverse::before {
  content: 'Reverse ';
}

<div id="cardGroup" class="container"></div>
<button id="toggle" type="button">Order</button>