使用 CSS 交换 div 项答案

【问题标题】：Swap div items using CSS使用 CSS 交换 div 项
【发布时间】：2019-06-25 11:45:52
【问题描述】：

一个 div 中有两个列表项和一个交换按钮。单击交换时，我必须更改项目的顺序。我可以使用下面的swap 函数来实现它。

var ints = [ "1", "2", "3", "4" ],
    chars = [ "A", "B", "C", "D"],
    list1 = document.getElementById("list1"),
    list2 = document.getElementById("list2"),
    toggle = 0;

setList(list1, ints);
setList(list2, chars);

function setList(element, data) {
  for (var i in data) {  
    var elem = document.createElement("li");
    elem.innerText = data[i];
    element.appendChild(elem);
  }
}

function swap() {
  list1.innerHTML = "";
  list2.innerHTML = "";
  if(toggle==0) {
    setList(list1, chars);
    setList(list2, ints);
    toggle=1;
  } else {
    setList(list1, ints);
    setList(list2, chars);
    toggle=0;
  }  
}

.box {
  display: flex;
  align-items: center;
  position: absolute;
  top: 20px !important;
}

<div class="box">
<ul id="list1"></ul>
<ul id="list2"></ul>
</div>

<button id="btn" onclick="swap()">Swap</button>

我想知道这个功能是否可以使用 CSS 来实现。代码也可以在codepen上测试https://codepen.io/imjaydeep/pen/EBvaxG?editors=1111

【问题讨论】：

您可以通过订单简单地做到这一点：developer.mozilla.org/en-US/docs/Web/CSS/order
@TemaniAfif 我已经使用 css order 属性保存了笔，但它不起作用，不确定我是否正确完成。
您为两个元素指定了相同的order: 1，这不会改变任何内容 - 元素首先按顺序值排序，然后按它们在 DOM 中的自然顺序排序。改为#list2 { order: 0; }，您将首先看到按字母顺序“索引”的列表。
@TemaniAfif gotcha.. 没有正确删除类，为两个列表保持 order:1 并切换它.. 谢谢。

标签： javascript html css

【解决方案1】：

使用 CSS order 属性实现。

var ints = [ "1", "2", "3", "4" ],
    chars = [ "A", "B", "C", "D"],
    list1 = document.getElementById("list1"),
    list2 = document.getElementById("list2"),
    toggle = 0;

setList(list1, ints);
setList(list2, chars);

function setList(element, data) {
  for (var i in data) {  
    var elem = document.createElement("li");
    elem.innerText = data[i];
    element.appendChild(elem);
  }
}

function swap() {
  if (toggle==0) {
    list1.classList.remove('list1');
    list2.classList.add('list2');
    toggle=1;
  } else {
    list2.classList.remove('list2');
    list1.classList.add('list1');
    toggle=0;
  }  
}

.box {
  display: flex;
  align-items: center;
  position: absolute;
  top: 20px !important;
}

.list1 {
  order: 1;
}

.list2 {
  order: 1;
}

<div class="box">
<ul id="list1"></ul>
<ul id="list2"></ul>
</div>

<button id="btn" onclick="swap()">Swap</button>

【讨论】：

【解决方案2】：

你可以这样做：

用复选框替换按钮并使用它来切换交换，在这种情况下，反转容器 div 的行顺序

div {
  display: flex;
  align-items: center;
  position: absolute;
}

#swap:checked + div {
  flex-direction: row-reverse;
}

 <label>Swap</label>
 <input type="checkbox" id="swap" />
  <div>
    <ul id="list1">
      <li>1</li>
      <li>2</li>
      <li>3</li>
    </ul>
    <ul id="list2">
      <li>a</li>
      <li>b</li>
      <li>c</li>
    </ul>
  </div>

【讨论】：