如何为每个页面元素初始化一个ES6模块

Question

我正在尝试创建一个ES6模块，该模块可以多次初始化（对于页面元素的每个实例一次）。

我的页面上有3个视频组件，我想切换点击来源视频中的“播放”类别。但是，只有最后一个视频的实例才切换过该类。

有人可以帮忙吗？我一辈子都无法让代码针对每个实例运行。

index.html

<div class="video">...</div>
<div class="video">...</div>
<div class="video">...</div>

main.js

import * as video from './video';

var $videos = $('.video');

$.each($videos, function(i, $video) {

  video.build($video);

});

video.js

export function build (videoInstance) {

  $(videoInstance).on('click', function (e) {

    $(this).toggleClass('playing');

  });

}