1个按钮可切换3种分类

Question

我的视图中有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>

Answer 1

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

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>

Answer 2

您是否考虑过只保留一个按钮？ 您可以在每次单击按钮时增加一个全局变量“ count”。然后，使用“ if”语句，可以根据计数器的值触发这三个函数中的每一个？

Answer 3

我知道您想将div项移动

const button = document.getElementById("sort");
const items  = document.querySelectorAll(".item");
const times  = document.querySelectorAll(".time");
const container = document.querySelector(".item-sort");
const originalHours = []
for (let i = 0; i < times.length; i++) {
  const hour = times[i].innerText;
  originalHours.push(hour);
  items[i].setAttribute("data-time",hour); // add the time to the item div
}
const sortClasses = ["nosort","asc","desc"];
let cnt = 0;
button.addEventListener("click",function() {
  let hours = originalHours.slice();
  this.className="";
  cnt++;
  if (cnt>=sortClasses.length) cnt=0;
  this.classList.toggle(sortClasses[cnt]);
  
  if (this.classList.contains("asc")) {
    hours.sort();
    this.innerText = "Descending";
  }  
  else if (this.classList.contains("desc")) {
    hours.sort().reverse();
    this.innerText = "Unsorted";
  }  
  else this.innerText = "Ascending";
  
  for (let i = 0; i < hours.length; i++) {
    let sel = "[data-time='"+hours[i]+"']"; // selector based on time
    let itemDiv = document.querySelector(sel);
    if (itemDiv) container.appendChild(itemDiv);
  }
});

<div class="full-item">
  <div class="buttons">
    <div class="button-item">
      <button id="sort" class="nosort" title="Click to sort">Ascending</button>
    </div>
  </div>
  <div class="item-sort">
    <div class="item">
      <div class="pic"><img src="https://via.placeholder.com/300.png/9ff?text=15:20" /></div>
      <div class="time"><span>15:20</span></div>
    </div>
    <div class="item">
      <div class="pic"><img src="https://via.placeholder.com/300.png/99f?text=13:10" /></div>
      <div class="time"><span>13:10</span></div>
    </div>
    <div class="item">
      <div class="pic"><img src="https://via.placeholder.com/300.png/ff9?text=18:40" /></div>
      <div class="time"><span>18:40</span></div>
    </div>
  </div>
</div>

Answer 4

一种更加用户友好的方法是使用下拉列表，而不是多次单击。

使您可以选择所需的排序方法，而不必确定结果如何。

const sortOptions = document.getElementById('Sort-options');
const times = document.getElementsByClassName("time");
const originalHours = [];
for (let i = 0; i < times.length; i++) {
    const hour = times[i].innerText;
    originalHours.push(hour)
  }

sortOptions.addEventListener('change', function(event){
  let selection = event.target.value;
  let hours = originalHours.slice();
  
  if (selection === 'Sort Asc') {
        hours.sort();
      }
  
  if (selection === 'Sort Desc') {
        hours.sort().reverse()
      }
  
  for (let i = 0; i < hours.length; i++) {
    times[i].firstElementChild.innerText = hours[i];
  }
});

    <div class="full-item">  
  <select id="Sort-options">
    <option value="" selected>No Sort</option>
    <option value="Sort Asc">Sort Asc</option>
    <option value="Sort Desc">Sort Desc</option>
  </select>
  
  <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>

Answer 5

执行此操作的方法很多，其中一种方法如下

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];
  }
  buttonAsc.parentElement.classList.remove("active");
  buttonDesc.parentElement.classList.add("active");
}
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];
  }
  buttonDesc.parentElement.classList.remove("active");
  buttonNo.parentElement.classList.add("active");
}
buttonNo.onclick = function() {
  for (let i = 0; i < originalHours.length; i++) {
    times[i].firstElementChild.innerText = originalHours[i];
  }
  buttonNo.parentElement.classList.remove("active");
  buttonAsc.parentElement.classList.add("active");
}

.button-item {
  display: none;
}
.button-item.active{
  display: block;
}

<div class="full-item">
  <div class="buttons">
    <div class="button-item active">
      <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>