从 JavaScript 函数转换为 jQuery

Posted 2023-02-22

【中文标题】从 JavaScript 函数转换为 jQuery

【英文标题】：Convert from JavaScript function to 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？

【参考方案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 视频

谢谢你的帮助队友