Question

我有这个功能，我想知道如何使用jQuery工作。

我的HTML：

<video id="mainVideo" width=320 height=240 autoplay>
</video>
<br/>
<video class="thumbnail" width=100 height=100>
    <source src="http://html5demos.com/assets/dizzy.mp4" type="video/mp4">
</video>
<video class="thumbnail" width=100 height=100>
    <source src="http://techslides.com/demos/sample-videos/small.mp4" type="video/mp4">
</video>

这是功能：

var videos = document.querySelectorAll(".videoThumbnail");
for(var i = 0; i < videos.length; i++) {
    videos[i].addEventListener('click', clickHandler, false);
}

function clickHandler(e) {
    var mainVideo = document.getElementById("mainVideo");
    mainVideo.src = e.srcElement.currentSrc;
}

Answer 1

这是我的解决方案，将来发布您的HTML代码以帮助我们解决问题：

$(function(){
    $('.thumbnail').click(function(){
        $('#mainVideo').replaceWith('<video id="mainVideo" width=320 height=240 autoplay></video>');
       $('#mainVideo').html($(this).html());
    });
});

以下是fiddle

Answer 2

代码已经与jQuery一起使用，因此没有必要进行转换才能使其正常运行。

也就是说，这是使用jQuery执行此操作的更典型方法：

var mainVideo = $("#mainVideo");
$(".videoThumbnail").click(function() {
  mainVideo.prop("src", this.srcElement.currentSrc);
});

从JavaScript函数转换为jQuery

2 个答案: