Question

我正在使用具有动态视频的自定义滑块。每次幻灯片更改时，都会在DOM中插入新视频，同时删除前一个视频。我正在使用CSS过渡和一个类将视频的位置更改为视图，所以理想情况下我希望函数能够：

1）将CSS类添加到旧视频

2）remove()或detach()旧视频**

3）为新视频添加CSS类

到目前为止我的代码是

function videoDetach() {

    // restore loading spinner
    $('.spinnerMsg').removeClass("nospin");

    // move video out of screen and bring the next one in
    $('#bgIn video:first').removeClass( function (){
        $('#bgIn video:first').addClass("outview");
        setTimeout(function(){ 
            $('#bgIn video:first').detach();
            $('#bgIn video:last').addClass("inview");
        },250);
    });
}

此代码按预期工作，但我不确定它是否安全或正确，完成此类任务的最佳做法是什么？

**不确定选择哪一个，每个视频都会在滑块重复时插回，因此detach()看起来很吸引人，但是可以在DOM中存储多个具有相同{{1}的视频}}？ id还会强制用户重新下载整个视频吗？

所有反馈都表示赞赏。

更新

在T.J的答案之后调整了代码，因为它通过分离所有视频或允许重复而有点不稳定，最终代码如下所示：

remove();

Answer 1

您将该功能传入的removeClass电话实际上是无操作，您可以完全删除它而不改变发生的情况：

function videoDetach() {

    // restore loading spinner
    $('.spinnerMsg').removeClass("nospin");

    // move video out of screen and bring the next one in
    $('#bgIn video:first').addClass("outview");
    setTimeout(function(){ 
        $('#bgIn video:first').detach();
        $('#bgIn video:last').addClass("inview");
    },250);
}

如果你给removeClass（或大多数jQuery的其他setter操作）一个函数，jQuery将为该集合中的每个DOM元素调用该函数一次;它希望函数返回一些有用的东西。在removeClass的情况下，它期望函数返回要从该元素中删除的类。

它工作的唯一原因是jQuery要么只调用一次函数（如果有一个匹配#bgIn video:first的元素），要么根本不调用，并且它会发生代码< em> in 如果存在匹配#bgIn video:first的元素，则该函数仅执行某些操作。如果您在包含多个元素的jQuery集上完成了removeClass，那么它会重复调用您的函数;如果你在一个完全没有元素的集合上调用它，你的函数将永远不会被调用。如果内部代码使用的元素不同于为removeClass选择的元素，则结果可能看起来很混乱。

完成此类任务的最佳做法是什么？

如上所述，直接运行代码，不会错误地使用操作的副作用。

不确定选择哪一个，每个视频都会在滑块重复时插回，因此detach()看起来很吸引人，但是可以在DOM中存储多个具有相同ID的视频吗？

如果元素已分离，则DOM中的不是;没有一个元素存在，但不在DOM中，它与DOM中的元素具有相同的id。但根据您的代码，您不会，因为您正在分离video元素（就您的代码演示而言，它没有id），而不是#bgIn元素。

还会remove();强制用户重新下载整个视频吗？

不，浏览器的缓存不是特定于元素的。

将函数包装在jQuery.removeClass（）中是否安全？

更新

1 个答案: