從JavaScript函數轉換爲jQuery

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