javascript - 交换 3 个 div 并使选择的 div 移至中心

Question

我有三个 div，我希望每次单击任何 div 时，它都会与位于中心的第二个 div 交换。

我已经尝试过这样的方法，但它不起作用:

function swapDiv(event, elem) {
  elem.parentNode.insertBefore(elem, elem.parentNode.secondChild);
}

<div class="all-div-container">
  <div class="div1" onclick="swapDiv(event,this);">
    1
  </div>
  <div class="div2" onclick="swapDiv(event,this);">
    2
  </div>
  <div class="div3" onclick="swapDiv(event,this);">
    3
  </div>
</div>

1 2 3，当我点击3时，结果必须是1 3 2，并且我点击1 它必须是3 1 2

Answer 1

function swapDiv(event, elem) {
    // get all elements in .all-div-container
    const allElements = [...elem.parentElement.children];
    // get index of target elem
    const targetIndex = allElements.indexOf(elem);
    // get center element
    const centerElem = allElements[1];
    // exit from function if we clicked at center elem
    if (elem === centerElem) return;
    // move center element
    if (targetIndex === 0) {
        elem.parentElement.prepend(centerElem)
    } else {
        elem.parentElement.append(centerElem)
    }
}

<div class="all-div-container">
    <div class="div1" onclick="swapDiv(event,this);">
        1
    </div>
    <div class="div2" onclick="swapDiv(event,this);">
        2
    </div>
    <div class="div3" onclick="swapDiv(event,this);">
        3
    </div>
</div>