javascript - 将函数包装在 jQuery.removeClass() 中是否安全？

Question

我正在开发一个包含动态视频的自定义 slider 。每次幻灯片更改时，都会将一个新视频插入到 DOM 中，同时删除前一个视频。我正在使用带有类的 CSS 转换来将视频的位置更改为 View ，因此理想情况下我希望该函数:

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);
    });
}

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

** 不确定选择哪个，每个视频都将在 slider 重复时插入回来，所以 detach() 看起来很吸引人，但是在 DOM 中存储多个视频是否可以相同的 id？ remove(); 还会强制用户重新下载整个视频吗？

感谢所有反馈。

---

更新

根据 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);
}

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)要么根本不调用，代码 in 该函数仅在存在与 #bgIn video:first 匹配的元素时才执行某些操作。如果您在包含多个元素的 jQuery 集合上执行 removeClass 操作，它会重复调用您的函数；如果你在一个根本没有元素的集合上调用它，你的函数将永远不会被调用。如果内部代码对与为 removeClass 选择的元素不同的元素进行操作，结果可能看起来很困惑。

what is the best practice for accomplishing such a task?

只是直接运行代码，如上，没有错误地使用操作的副作用。

not sure which one to choose, each video will be inserted back as the slider repeats itself so detach() seems appealing, but is it ok to store multiple videos in the DOM which have the same id?

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

also will remove(); force the users to redownload the entire video?

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