从 JavaScript 函数转换为 jQuery答案

【问题标题】：Convert from JavaScript function to jQuery从 JavaScript 函数转换为 jQuery
【发布时间】：2015-04-09 17:23:16
【问题描述】：

我有这个功能，我想知道如何使用 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;
}

【问题讨论】：

不做任何编辑。您的代码现在可以使用 jQuery。
@NiettheDarkAbsol 知道，但我的意思是把它转换成 jQuery
@zerkms 那是什么？
学习 jQuery 会有所帮助。但我会给你一个提示。前 4 行是：$(".videoThumbnail").click(function(){ ... });.
@Hazz ，只是想知道 - 你为什么要把你知道的东西转换成你不知道的东西？我的意思是，无缘无故地从 javascript 切换到 jQuery？

标签： javascript jquery

【解决方案1】：

该代码已经可以与 jQuery 一起使用，因此无需进行任何转换即可使其正常运行。

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

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

【讨论】：

【解决方案2】：

这是我的解决方案，以后贴出你的 HTML 代码来帮助我们解决问题：

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

这里是fiddle

【讨论】：

您需要在页面中包含 jQuery。
它包含在我的页面中
它们不是图片而是 HTML5 视频
谢谢你的帮助队友