如何通过jQuery实现点击按钮时反复切换指定Div的位置？

云上老周

2026-8-10

解决方案：实现Div位置的双向切换

问题根源

你的代码每次点击都执行固定的移动逻辑，第一次切换后元素类名没变化，第二次点击还是重复把.p1a往player1-b移动，相当于做了无效操作；另外代码里还多写了几行错误的append调用（应该用appendTo），这部分完全没用。

方案一：用状态变量记录切换状态

通过变量标记当前布局状态，点击时根据状态执行对应移动逻辑，之后切换状态：

// 初始化状态：true为初始布局，false为已切换
let isOriginalLayout = true;
// 提前声明score计数变量，避免报错
let i = 0;

$('#score_kiri').click(function() {
    $('#player_kiri').val(i++);

    if (isOriginalLayout) {
        // 初始→切换：把p1a/1a移到player1-b，p1b/1b移到player1-a
        $('.p1a, .1a').appendTo('.player1-b');
        $('.p1b, .1b').appendTo('.player1-a');
    } else {
        // 切换→初始：移回原容器
        $('.p1a, .1a').appendTo('.player1-a');
        $('.p1b, .1b').appendTo('.player1-b');
    }
    // 翻转状态
    isOriginalLayout = !isOriginalLayout;
});

方案二：根据元素当前父容器动态判断

不需要状态变量，直接检查元素所在容器，决定移动方向：

let i = 0;

$('#score_kiri').click(function() {
    $('#player_kiri').val(i++);

    // 处理p1a和1a
    $('.p1a, .1a').each(function() {
        const $el = $(this);
        if ($el.parent().hasClass('player1-a')) {
            $el.appendTo('.player1-b');
        } else {
            $el.appendTo('.player1-a');
        }
    });

    // 处理p1b和1b
    $('.p1b, .1b').each(function() {
        const $el = $(this);
        if ($el.parent().hasClass('player1-b')) {
            $el.appendTo('.player1-a');
        } else {
            $el.appendTo('.player1-b');
        }
    });
});