如何让我的jQuery函数在另一个函数内运行

Question

我需要帮助理解为什么我的jquery里面的四十不工作。我正在努力创建一个虚拟显微镜，当用户点击40倍的图像，我想要一个视频显示，并能够使用鼠标滚动浏览视频。我发现这段代码在如何控制html视频通过鼠标滚动?通过鼠标滚动来浏览视频。如果它本身在一个单独的文件中，它可以正常工作，但在40函数中，它将不起作用。我需要的功能被触发时，用户单击图像，所以我不知道我怎么能做到这一点，没有它在一个函数内。我在这个项目中一直使用javascript，几乎没有使用jquery，任何方向都很棒!

<video id="cellvid" autoplay loop>
<source type="video/mp4" src="media/micVideo.mp4"></source>
</video>
<img class="mag" id="40x" src="img/invertMag40x.png" alt="" onclick="forty()">

function forty() {
var video = $('#cellvid').get(0);
var increments = 0.5;
var videoReady=true;
var continueUpdatingVideo=true;
jQuery.event.special.mousewheel = {
setup: function( _, ns, handle ){
this.addEventListener("mousewheel", handle, { passive: true });
}
};
//uses mousewheel Eventlistener
$(function(){
$('#cellvid').on('mousewheel', function(e){
e.preventDefault();
console.log("I made it inside");
if(videoReady && continueUpdatingVideo) {
var delta = Math.max(-1, Math.min(1, (e.originalEvent.wheelDelta || -e.originalEvent.detail))); //either +1 or -1
updateVideo(delta * increments);
console.log("Mouse Scroll");
}
return false;
});
});

function updateVideo(delta) {
var videoLength = video.duration;
var videoPosition = (video.currentTime + delta > videoLength) ? videoLength : ((video.currentTime + delta < 0) ? 0 : video.currentTime + delta);
video.currentTime = videoPosition;
}
}

Answer 1

• 需要分隔函数定义
例如，事件侦听器应该在之外定义forty()
• updateVideo(delta)需要在
之外定义并在forty()内部调用。
• 以下是您如何更改它以使其更接近工作，根据需要进行更改，例如在调用updateVideo()时传递delta

function forty() {
var video = $('#cellvid').get(0);
var increments = 0.5;
var videoReady = true;
var continueUpdatingVideo = true;
jQuery.event.special.mousewheel = {
setup: function(_, ns, handle) {
this.addEventListener("mousewheel", handle, {
passive: true
});
}
};
updateVideo(someInputHere); // <-- change the function input here 
}
//uses mousewheel Eventlistener
$(function() {
$('#cellvid').on('mousewheel', function(e) {
e.preventDefault();
console.log("I made it inside");
if (videoReady && continueUpdatingVideo) {
var delta = Math.max(-1, Math.min(1, (e.originalEvent.wheelDelta || -e.originalEvent.detail))); //either +1 or -1
updateVideo(delta * increments);
console.log("Mouse Scroll");
}
return false;
});
});

function updateVideo(delta) {
var videoLength = video.duration;
var videoPosition = (video.currentTime + delta > videoLength) ? videoLength : ((video.currentTime + delta < 0) ? 0 : video.currentTime + delta);
video.currentTime = videoPosition;
}