jQuery/JavaScript左右Div切换异常：首次及第三次点击仅单向移动求助

问题 #

页面左侧有1个Div，右侧有3个Div。预期点击任意Div时，将该Div移至左侧，同时把左侧原有Div移到右侧。功能基本正常，但首次和第三次点击右侧项目时，仅能将点击的Div移到左侧，却无法将左侧原有Div移到右侧，无报错信息，后续点击恢复正常。要求左侧仅保留一个项目。

现有代码 #

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container">
  <div id="leftDiv">
    <div class="clickableDiv" id="info1">Div 1</div>
  </div>
  <div id="rightContainer">
    <div class="clickableDiv" id="info2">Div 2</div>
    <div class="clickableDiv" id="info3">Div 3</div>
    <div class="clickableDiv" id="info4">Div 4</div>
  </div>
</div>

CSS

body {
  margin: 0;
  display: flex;
  height: 100vh;
}

#container {
  display: flex;
  width: 50%;
}

#leftDiv {
  flex: 1;
}

#rightContainer {
  display: flex;
  flex-direction: column;
  width: 50%;
}

.clickableDiv {
  border: 1px solid #ccc;
  cursor: pointer;
  background-color: #f0f0f0;
  transition: background-color 0.3s ease;
}

.clickableDiv:hover {
  background-color: #e0e0e0;
}

JavaScript

document.addEventListener("DOMContentLoaded", function(event) {
  var rightContainer = document.getElementById('rightContainer');
  var leftDiv = document.getElementById('leftDiv');

  jQuery("#info1").click(function() {
    leftDiv.firstChild;
    if (leftDiv !== this) {
      if (leftDiv !== null) {
        rightContainer.appendChild(leftDiv.firstChild);
      }

      leftDiv.appendChild(this);
    }
  });

  jQuery("#info2").click(function() {
    leftDiv.firstChild;
    if (leftDiv !== this) {
      if (leftDiv !== null) {
        rightContainer.appendChild(leftDiv.firstChild);
      }

      leftDiv.appendChild(this);
    }
  });
  jQuery("#info3").click(function() {
    leftDiv.firstChild;
    if (leftDiv !== null) {
      rightContainer.appendChild(leftDiv.firstChild);
    }

    leftDiv.appendChild(this);
  });
  jQuery("#info4").click(function() {
    leftDiv.firstChild;
    if (leftDiv !== this) {
      if (leftDiv !== null) {
        rightContainer.appendChild(leftDiv.firstChild);
      }

      leftDiv.appendChild(this);
    }
  });
});

修复方案 #

问题根源 #

1. 空白节点干扰：leftDiv.firstChild会获取到DOM中的空白文本节点（换行、空格），而非目标的.clickableDiv元素。首次点击时，实际被移到右侧的是空白节点，原有Div仍留在左侧，导致视觉上没有变化。
2. 重复冗余的事件监听：每个Div单独绑定点击事件，代码冗余且维护性差。
3. 逻辑判断错误：部分监听函数中缺少leftDiv !== this的判断，可能导致不必要的移动操作。

修改后的代码 #

JavaScript

document.addEventListener("DOMContentLoaded", function() {
  const rightContainer = document.getElementById('rightContainer');
  const leftDiv = document.getElementById('leftDiv');

  // 统一给所有.clickableDiv绑定点击事件
  jQuery(".clickableDiv").click(function() {
    // 点击的是左侧当前的Div，无需操作
    if (this.parentElement.id === 'leftDiv') return;

    // 获取左侧当前的Div（而非firstChild）
    const currentLeftDiv = leftDiv.querySelector('.clickableDiv');
    // 将左侧原有Div移到右侧
    rightContainer.appendChild(currentLeftDiv);
    // 将点击的Div移到左侧
    leftDiv.appendChild(this);
  });
});

关键修改点 #

1. 精准获取左侧元素：用leftDiv.querySelector('.clickableDiv')替代leftDiv.firstChild，确保获取到的是目标Div元素，避免空白节点干扰。
2. 统一事件绑定：通过类选择器一次性给所有可点击Div绑定事件，减少冗余代码。
3. 简化逻辑判断：通过判断点击元素的父元素ID，直接跳过左侧当前Div的点击操作，逻辑更清晰。
4. 移除无效代码：删除了原代码中无意义的leftDiv.firstChild;语句。

内容的提问来源于stack exchange，提问作者Stefan Poppe