javascript - 使用 CSS 交换 div 元素

Question

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

Answer 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>