Question

我目前在按字母顺序自动对按钮进行排序时遇到麻烦。我不知道如何对这些按钮（jquery / javascript）进行排序，但是我想在页面加载时自动进行。感谢您的帮助。这是我的代码：

<style>
.games-button {
  background-color: #383838;
  color: #eeeeee;
  text-align: middle;
  text-decoration: none;
  font-size: 14px;
  cursor: pointer;
  border-radius: 5px;
  height:42px;
  vertical-align: left;
  display: inline-block;
  letter-spacing: 0.5px;
  float: left;
  overflow:hidden;
  margin-left:100px;
  margin-bottom: 2px;
  text-transform: uppercase;

}
.games-button:hover {
    box-shadow: inset 0 0 100px 100px rgba(255, 255, 255, 0.1);
}

</style>

<button class="games-button" style="width:240px;" onclick="window.open('/samplepage.html','_blank');">A</button>
<button class="games-button" style="width:240px;" onclick="window.open('/samplepage.html','_blank');">Z</button>
<button class="games-button" style="width:240px;" onclick="window.open('/samplepage.html','_blank');">H</button>
<button class="games-button" style="width:240px;" onclick="window.open('/samplepage.html','_blank');">B</button>
<button class="games-button" style="width:240px;" onclick="window.open('/samplepage.html','_blank');">N</button>
<button class="games-button" style="width:240px;" onclick="window.open('/samplepage.html','_blank');">C</button>

更新：这是我在单击按钮时对按钮进行排序的代码。没有按钮怎么办？

<button onclick="sortList()">Sort</button>

<ul id="id01">
  <button>z</button>
 <button>a</button> 
 <button>b</button>
 <button>l</button>
 <button>b</button>

</ul>

<script>
function sortList() {
  var list, i, switching, b, shouldSwitch;
  list = document.getElementById("id01");
  switching = true;
  while (switching) {
    switching = false;
    b = list.getElementsByTagName("button");
    for (i = 0; i < (b.length - 1); i++) {
      shouldSwitch = false;
      if (b[i].innerHTML.toLowerCase() > b[i + 1].innerHTML.toLowerCase()) {
        shouldSwitch = true;
        break;
      }
    }
    if (shouldSwitch) {
      b[i].parentNode.insertBefore(b[i + 1], b[i]);
      switching = true;
    }
  }
}
</script>

Answer 1

似乎您正在进入js开发。祝你好运。

为了操作DOM元素，如果放置一些线索或提示来帮助代码查找元素，总是比较容易。

在这种情况下，所有按钮都放置在body元素中，因此，为了更轻松地查找和更换按钮，请将其放置在另一个元素中。像这样：

<div id="button-container">
  <button class="games-button" style="width:240px;" onclick="window.open('/samplepage.html','_blank');">A</button>
  <button class="games-button" style="width:240px;" onclick="window.open('/samplepage.html','_blank');">Z</button>
  <button class="games-button" style="width:240px;" onclick="window.open('/samplepage.html','_blank');">H</button>
  <button class="games-button" style="width:240px;" onclick="window.open('/samplepage.html','_blank');">B</button>
  <button class="games-button" style="width:240px;" onclick="window.open('/samplepage.html','_blank');">N</button>
  <button class="games-button" style="width:240px;" onclick="window.open('/samplepage.html','_blank');">C</button>
</div>

然后找到它们并对其进行排序。

<script>
  'use strict';
  const buttonContainer = document.getElementById('button-container');
  const sortedButtons = [... buttonContainer.children].sort((buttonA, buttonB) => {
    const name1 = buttonA.innerText.toLowerCase();
    const name2 = buttonB.innerText.toLowerCase();
    if(name1 === name2){
      return 0;
    } else if(name1 < name2){
      return -1;
    } else {
      return 0;
    }
  });
  sortedButtons.forEach(button => buttonContainer.append(button));
</script>

就是这样。

无法自动按字母顺序对按钮进行排序

1 个答案: