我有三个div,我希望每次我点击任何一个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

推荐答案

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>

Javascript相关问答推荐

我不知道为什么我的JavaScript没有验证我的表单

useNavigation更改URL,但不呈现或显示组件

Angular material 拖放堆叠的牌副,悬停时自动展开&

成功完成Reducers后不更新状态

当点击注册页面上的注册按钮时,邮箱重复

单个HTML中的多个HTML文件

连接到游戏的玩家不会在浏览器在线游戏中呈现

Jest toHaveBeenNthCalledWith返回当前设置的变量值,而不是调用时的值

是否可以将Select()和Sample()与Mongoose结合使用?

在D3条形图中对具有相同X值的多条记录进行分组

为列表中的项目设置动画

如何使用画布在另一个内部绘制一个较小但相同的形状,同时保持恒定的边界厚度?

处理TypeScrip Vue组件未初始化的react 对象

有没有办法更改Chart.js 3.x.x中主要刻度的字体?

P5JS-绘制不重叠的圆

如何在尚未创建的鼠标悬停事件上访问和着色div?

用Reaction-RT-Chart创建实时条形图

如何使用puppeteer操作所有选项

计算对象数组中属性的滚动增量

带元素数组的Mongo聚合