求助：点击按钮实现DIV在指定列表间切换的通用JS方案

针对你32组四列列表的场景，我们可以通过统一类名+组内查找的方式实现通用逻辑，无需为每组重复编写脚本，核心思路是：

• 用类名替代全局唯一的ID，避免多组冲突
• 统一按钮类，通过当前列表的类型推断目标列表
• 基于按钮所在的组容器，定位同组内的目标列表

步骤1：重构HTML结构 #

修改后的HTML将解决全局ID冲突问题，同时统一标识列表和按钮：

<!-- 给每个四列组添加统一类名 list-group -->
<div id="G235" class="topshort hidden list-group">
  <h2 class="test1" style="position: absolute; left: 22%">Bestått</h2>
  <div class="div-left">
    <br>
    <h3 style="font-size: 16px">Fellesfag</h3>
    <div class="boxy" style="width: 100%; height: 50px; background-color: lightgray; position: relative; margin-bottom: 15px; border-bottom: solid; border-top: solid"><strong><br><i>Fag</i><i style=" position: absolute; right: 80px;">Karakter</i></strong></div>
    <!-- 用类名 list-1 代替ID L1 -->
    <div class="list list-1"></div>
  </div> 
  <div class="div-leftleft">
    <br>
    <h3 style="font-size: 16px">Programfag</h3>
    <div class="boxy" style="width: 100%; height: 50px; background-color: lightgray; position: relative; margin-bottom: 15px; border-bottom: solid; border-top: solid"><strong><br><i>Fag</i><i style=" position: absolute; right: 80px;">Karakter</i></strong></div>
    <!-- 用类名 list-2 代替ID L2 -->
    <div class="list list-2"></div>
  </div> 
  <div class="vlshort"></div>
       
  <h2 class="test2" style="position: absolute; left: 71%;">Ikke bestått</h2>
  <div class="div-right"> 
    <br>
    <h3 style="font-size: 16px">Fellesfag</h3>
    <div class="boxy" style="width: 100%; height: 50px; background-color: lightgray; position: relative; margin-bottom: 15px; border-bottom: solid; border-top: solid"><strong><br><i>Fag</i><i style=" position: absolute; right: 80px;">Karakter</i></strong></div>
    <!-- 用类名 list-3 代替ID L3 -->
    <div class="list list-3">
      <div class="lines">
        <a>Text</a>
        <!-- 统一按钮类为 move-btn -->
        <button class="move-btn">Legg til</button>
        <hr>
      </div>
    </div>
  </div>
    
  <div class="div-rightright">
    <br>
    <h3 style="font-size: 16px">Programfag</h3>
    <div class="boxy" style="width: 100%; height: 50px; background-color: lightgray; position: relative; margin-bottom: 15px; border-bottom: solid; border-top: solid"><strong><br><i>Fag</i><i style=" position: absolute; right: 80px;">Karakter</i></strong></div>
    <!-- 用类名 list-4 代替ID L4 -->
    <div class="list list-4">
      <div class="lines">
        <a>Text</a>
        <!-- 统一按钮类为 move-btn -->
        <button class="move-btn">Legg til</button>
        <hr>
      </div>
    </div>
  </div> 
  <a style="position: absolute; left: 35px; bottom: 35px; color: grey;" contentEditable="true">IB = Ikke bestått</a>
</div>

<!-- 其他31组四列列表都采用相同的类名结构 -->

步骤2：编写通用JS逻辑 #

只需要一段脚本，即可处理所有组的切换需求：

document.addEventListener("DOMContentLoaded", function() {
    // 给所有统一类名的按钮绑定点击事件
    const buttons = document.querySelectorAll(".move-btn");
    
    buttons.forEach(btn => {
        btn.addEventListener("click", function() {
            // 1. 获取当前按钮所在的列表项（.lines）
            const item = this.parentElement;
            // 2. 获取当前列表项所在的列表容器（list-1/list-2/list-3/list-4）
            const currentList = item.parentElement;
            // 3. 获取当前列表所属的四列组容器（list-group）
            const group = currentList.closest(".list-group");
            
            // 4. 根据当前列表的类名，确定目标列表的类名
            let targetListClass;
            if (currentList.classList.contains("list-1")) {
                targetListClass = "list-3";
            } else if (currentList.classList.contains("list-3")) {
                targetListClass = "list-1";
            } else if (currentList.classList.contains("list-2")) {
                targetListClass = "list-4";
            } else if (currentList.classList.contains("list-4")) {
                targetListClass = "list-2";
            }
            
            // 5. 在同组内找到目标列表容器，并移动列表项
            const targetList = group.querySelector(`.${targetListClass}`);
            if (targetList) {
                targetList.appendChild(item);
            }
        });
    });
});

方案优势 #

1. 无重复代码：一段JS适配所有32组列表，新增组时只需复制HTML结构，无需修改脚本
2. 避免全局冲突：用类名代替全局ID，解决多组列表的标识冲突问题
3. 双向切换自动处理：通过判断当前列表类型自动推断目标，完美支持L1↔L3、L2↔L4的双向移动
4. 扩展性强：后续如果需要调整切换规则，只需修改JS中的类名映射逻辑即可

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