时间戳

首页 > 解决方案 > 1 个按钮切换 3 种排序变化

javascript - 1 个按钮切换 3 种排序变化

问题描述

我的视图中有 3 个按钮。他们每个人都有一项工作要做。

现在我希望它们成为做三件事的一键：

每次点击都会在每种排序中切换

const buttonAsc = document.getElementById("Sort-item-asc")
const buttonDesc = document.getElementById("Sort-item-desc")
const buttonNo = document.getElementById("Sort-item-no")
const times = document.getElementsByClassName("time")
const originalHours = []
for (let i = 0; i < times.length; i++) {
  const hour = times[i].innerText;
  originalHours.push(hour)
}
buttonAsc.onclick = function() {
  let hours = []
  for (let i = 0; i < times.length; i++) {
    const hour = times[i].innerText;
    hours.push(hour)
  }
  hours.sort()
  for (let i = 0; i < hours.length; i++) {
    times[i].firstElementChild.innerText = hours[i];
  }
}
buttonDesc.onclick = function() {
  let hours = []
  for (let i = 0; i < times.length; i++) {
    const hour = times[i].innerText;
    hours.push(hour)
  }
  hours.sort()
  hours.reverse()
  for (let i = 0; i < hours.length; i++) {
    times[i].firstElementChild.innerText = hours[i];
  }
}
buttonNo.onclick = function() {
  for (let i = 0; i < originalHours.length; i++) {
    times[i].firstElementChild.innerText = originalHours[i];
  }
}
<div class="full-item">
  <div class="buttons">
    <div class="button-item">
      <button id="Sort-item-asc">Sort Asc</button>
    </div>
    <div class="button-item">
      <button id="Sort-item-desc">Sort Desc</button>
    </div>
    <div class="button-item">
      <button id="Sort-item-no">No Sort</button>
    </div>
  </div>
  <div class="item-sort">
    <div class="item">
      <div class="pic"></div>
      <div class="time"><span>15:20</span></div>
    </div>
    <div class="item">
      <div class="pic"></div>
      <div class="time"><span>13:10</span></div>
    </div>
    <div class="item">
      <div class="pic"></div>
      <div class="time"><span>18:40</span></div>
    </div>
  </div>
</div>

标签： javascripthtmlcss

解决方案

您可以创建一个包含三个版本的列表（升序、降序、未排序）的超级数组。然后在每次单击时从该超级数组中提取第一个列表，同时将其再次添加到列表的后面。使用此列表进行显示：

const button = document.getElementById("Sort-item");
const times = [...document.getElementsByClassName("time")];
const originalHours = times.map(time => time.textContent);
// Pre-build the three versions of the list
const allHours = [[...originalHours].sort(), [...originalHours].sort().reverse(), originalHours];

button.addEventListener("click", function() {
    // Cycle the three lists: 
    const hours = allHours.shift();
    allHours.push(hours);
    for (let i = 0; i < hours.length; i++) {
        times[i].firstElementChild.textContent = hours[i];
    }
});
<div class="full-item">
  <div class="buttons">
    <div class="button-item">
      <button id="Sort-item">Sort Toggle</button>
    </div>
  </div>
  <div class="item-sort">
    <div class="item">
      <div class="pic"></div>
      <div class="time"><span>15:20</span></div>
    </div>
    <div class="item">
      <div class="pic"></div>
      <div class="time"><span>13:10</span></div>
    </div>
    <div class="item">
      <div class="pic"></div>
      <div class="time"><span>18:40</span></div>
    </div>
  </div>
</div>

如果您需要重新定位div元素（因为您对它们有特定的属性或对它们的引用），那么您可以将它们类似地存储在数组中：

const button = document.getElementById("Sort-item");
const container = document.querySelector(".item-sort");
const times = [...document.querySelectorAll(".time")];
const originalItems = times.map(time => [time.parentNode, time.textContent]);
const sortedItems = [...originalItems].sort((a,b) => a[1].localeCompare(b[1]))
                                      .map(a => a[0]); // Only keep node reference
// Pre-build the three versions of the list
const allItems = [sortedItems, [...sortedItems].reverse(), 
                  originalItems.map(a => a[0])];

button.addEventListener("click", function() {
    // Cycle the three lists: 
    const items = allItems.shift();
    allItems.push(items);
    for (const item of items) {
        container.appendChild(item);
    }
});
<div class="full-item">
  <div class="buttons">
    <div class="button-item">
      <button id="Sort-item">Sort Toggle</button>
    </div>
  </div>
  <div class="item-sort">
    <div class="item">
      <div class="pic"></div>
      <div class="time"><span>15:20</span></div>
    </div>
    <div class="item">
      <div class="pic"></div>
      <div class="time"><span>13:10</span></div>
    </div>
    <div class="item">
      <div class="pic"></div>
      <div class="time"><span>18:40</span></div>
    </div>
  </div>
</div>

推荐阅读