使用jQuery交换Div ID问题：定时交换仅生效一次

这个问题的核心在于你每次交换ID时的逻辑漏洞，以及依赖动态变化的ID进行DOM选择带来的问题。让我一步步拆解并解决：

为什么你的代码只首次生效？ #

当第一次执行定时任务时：

1. 你把#viewNext的ID改成viewActual
2. 这时候DOM里同时存在两个id="viewActual"的元素（原来的#viewActual还没被修改）
3. 接着你用$("#viewActual")选择元素，jQuery只会返回第一个匹配的元素（也就是刚被改名的原#viewNext），把它的ID改回viewNext
4. 结果就是两个元素的ID又回到了初始状态，后续的定时任务都在做无用功

修复方案：使用元素引用而非动态ID选择 #

最佳实践是一开始就获取两个元素的引用，之后直接操作这些引用，完全避开动态ID的选择问题，同时实现预加载逻辑：

// 1. 创建元素并保存引用
const viewActual = $(`<div class="viewBox" id="viewActual" style="height: ${screenWidth}px; width: ${screenHeight}px;"></div>`);
const viewNext = $(`<div class="viewBox" id="viewNext" style="height: ${screenWidth}px; width: ${screenHeight}px;"></div>`);

// 2. 添加到容器并初始化加载内容
$('#viewContainer').append(viewActual).append(viewNext);
viewActual.load('test/test1.php').data('content', 'test1'); // 用data属性记录当前加载的内容
viewNext.load('test/test2.php').data('content', 'test2');

// 3. 定时交换ID+预加载逻辑
setInterval(function() {
    // 交换两个元素的ID
    const tempId = viewActual.attr('id');
    viewActual.attr('id', viewNext.attr('id'));
    viewNext.attr('id', tempId);

    // 预加载新内容到当前的viewNext（交换后它会变成viewActual）
    const currentContent = viewActual.data('content');
    const nextContent = currentContent === 'test1' ? 'test2' : 'test1';
    viewNext.load(`test/${nextContent}.php`);

    // 更新data属性，记录新的内容标识
    viewActual.data('content', nextContent);
    viewNext.data('content', currentContent);
}, 2000);

另一种备选方案：通过类选择器获取元素 #

如果你不想提前保存引用，也可以每次通过共同的类viewBox来获取两个元素，避免依赖变化的ID：

// 初始化代码不变，修改定时任务部分
setInterval(function() {
    const [box1, box2] = $('.viewBox').get(); // 获取DOM元素数组
    const $box1 = $(box1);
    const $box2 = $(box2);

    // 交换ID
    const tempId = $box1.attr('id');
    $box1.attr('id', $box2.attr('id'));
    $box2.attr('id', tempId);

    // 预加载逻辑和上面一致，这里可以结合data属性或者其他方式跟踪内容
}, 2000);

关键要点总结 #

• 避免在动态修改ID后，再依赖ID选择元素，因为DOM中可能出现临时ID重复，导致选择器出错
• 提前保存元素引用是最可靠的方式，能确保你每次操作的都是正确的元素
• 预加载逻辑需要和ID交换同步，通过data属性跟踪当前加载的内容，确保每次交换后新的viewNext都加载了下一个要展示的内容

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