悬停时只有一个jquery函数可用于不同的音频文件

Question

我正在悬停一个文本时开始播放音频，如下所示：

$(".textOne p").hover(function() {

  $(".audioOne")[0].play();
  $(".audioOne")[0].volume = 0;
  $(".audioOne").animate({
    volume: 1
  }, 800);

}, function() {

  $(".audioOne").animate({
    volume: 0
  }, 800);

  timeOutAudio = setTimeout(function() {
    $(".audioOne")[0].pause();
    $(".audioOne")[0].currentTime = 0;
  }, 800);

});

//REPEATING FOR SECOND AUDIOFILE

$(".textTwo p").hover(function() {

  $(".audioTwo")[0].play();
  $(".audioTwo")[0].volume = 0;
  $(".audioTwo").animate({
    volume: 1
  }, 800);

}, function() {

  $(".audioTwo").animate({
    volume: 0
  }, 800);

  timeOutAudio = setTimeout(function() {
    $(".audioTwo")[0].pause();
    $(".audioTwo")[0].currentTime = 0;
  }, 800);

});

但是我想避免必须为每个音频文件和文本重复功能。有人知道在这里不重复自己的最好方法是什么吗？

感谢您的帮助。

Answer 1

我的解决方案是使用闭包：

foreach

然后，在内部函数中，您可以使用for，该$('.textOne p').hover(onHoverStartPlayAudio('.audioOne'), onHoverEndPauseAudio('.audioOne')) ; $('.textTwo p').hover(onHoverStartPlayAudio('.audioTwo'), onHoverEndPauseAudio('.audioTwo'))); function onHoverStartPlayAudio(audioName) { return function (event) { $(audioName).on('timeupdate', function() { $(event.target).css({ "background-size": this.currentTime / this.duration * 100 + '%' + '100%', }); }); $(audioName)[0].play(); $(audioName)[0].volume = 0; $(audioName).animate({ volume: 1 }, 800); } } function onHoverEndPauseAudio(audioName){ return function() { $(audioName).animate({ volume: 0 }, 800); timeOutAudio = setTimeout(function() { $(audioName)[0].pause(); $(audioName)[0].currentTime = 0; }, 800); } } 或audioName取决于所悬停的按钮。

请让我知道说明是否足够清楚。

希望有帮助

编辑：

我已经从提供的JSFiddle中添加了代码，悬停元素的CSS将会在.audioOne上更改。