Question

我想在点击时制作交换按钮或任何按钮，标记的展示位置更改。

例如，

<p id="1">h11</p>
<p id="2">h22</p>
<p id="3">h33</p>

每当点击向上按钮时，它就会变为

<p id="2">h22</p>
<p id="1">h11</p>
<p id="3">h33</p>

每当点击向下按钮时，它就变为

<p id="1">h11</p>
<p id="3">h33</p>
<p id="2">h22</p>

是否可以交换标签的位置？

谢谢！

Answer 1

由于没有insertAfter方法，这有点傻。

＆＃13;

function move(id, direction) {
  let el = document.getElementById(id);
  let next = el.nextElementSibling == null ? null : el.nextElementSibling.nextElementSibling;
  let prev = el.previousElementSibling;

  if (direction === 'down') {
    el.parentElement.insertBefore(el, next);
  } else {
    if (prev) el.parentElement.insertBefore(el, prev);
  }
}

＆＃13;

<link href="//cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.min.css" rel="stylesheet" />
<div>
  <div id="1">h11</div>
  <div id="2">h22</div>
  <div id="3">h33</div>
  <div id="4">h44</div>
  <div id="5">h55</div>
  <div id="6">h66</div>
</div>
<button onclick="move('1', 'down')">Down</button>
<button onclick="move('1', 'up')">Up</button>

＆＃13;

Answer 2

您可以使用flex-box更改元素的顺序

＆＃13;

.flex-container {
  display: flex;
  flex-direction: column;
}

.first-item {
  order: 2;
}
.second-item {
  order: 3;
}
.third-item {
  order: 1;
}

＆＃13;

<div class="flex-container">
  <div class="first-item">I'm first</div>
  <div class="second-item">I'm second</div>
  <div class="third-item">I'm third</div>
</div>

＆＃13;

所以你需要更改班级名称。

使用javascript更改HTML标记的展示位置

2 个答案: