Javascript 在jQuery.removeClass（）中封装函数安全吗？

我正在制作一个自定义的滑块，它有一个动态视频。每次幻灯片更改时，都会将一个新视频插入到DOM中，同时删除上一个视频。我正在使用CSS transition和一个类来将视频的位置更改为视图，因此理想情况下，我希望函数：

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中存储多个具有相同

id

的视频吗？也将

删除（）强制用户重新下载整个视频

感谢所有反馈


更新
根据T.J的回答调整了代码，因为分离所有视频或允许重复视频有点不稳定，最终代码如下所示：

function videoDetach() {

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

    // move current video out of screen
    $('#bgIn video').addClass("outview");

    setTimeout(function(){ 
        $('#bgIn video.outview').detach(); // detach old video
        $('#bgIn video').addClass("inview"); // bring new video into view
    },250);
}

将函数传递到的
removeClass
调用实际上是一个no-op，您可以完全删除它，而无需更改发生的情况：

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
匹配的元素），或者根本不调用，并且函数中的代码仅在存在与
#bgIn video:first
匹配的元素时才会执行某些操作。如果您在包含多个元素的jQuery集合上执行了
removeClass
，它将重复调用您的函数；如果您在一个集合上调用它，而集合中没有任何元素，那么您的函数就永远不会被调用。如果内部的代码与为
removeClass
选择的元素不同，则结果可能看起来很混乱

完成这项任务的最佳实践是什么

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

不确定要选择哪一个，每个视频都将在滑块重复自身时重新插入，因此
detach（）
看起来很吸引人，但是可以在DOM中存储多个具有相同id的视频吗

如果元素被分离，则它们不在DOM中；有一个存在但不在DOM中的元素，它与DOM中的元素具有相同的
id
，这是很好的。但是根据您的代码，您不会这样做，因为您分离的是
video
元素（就您的代码所示，它没有
id
），而不是
\bgIn
元素

也将
删除（）强制用户重新下载整个视频

不，浏览器的缓存不是特定于元素的。
您的带有该函数的removeclass无效。@DanielA.White无效吗？它对我有用。您能详细说明一下吗？请查看
removeClass
的文档。它没有返回任何东西。在同一个ID中DOM中的多个元素是一个坏的实践，考虑切换到类。@ TasoSk.:啊，是的，相当。但这是他们对
detach
功能的误解。感谢您提供的信息丰富的回答，这非常有帮助。虽然我不得不改变一下，但请看我的更新^