将 'hover()' 更改为 'on("vmouseover")'，破坏脚本和输出 'undefined'

Question

尝试制作带有悬停预览的视频缩略图。一切都很好，但我正在尝试将第 7 行的 .hover(function() 切换为 .on("vmouseover", function()，以获得更好的移动悬停。但是一旦我做了这个简单的更改，脚本就会将 'undefined' 输出到 <img> 源中。

福特 F250s 供参考。

带有 hover() 的代码：

// JavaScript Document
$(document).ready(function() {
 var slideshowIntervalId = 0;
 var slideshowIndex = 0;


 $(".thumbnail").hover(function() {
  var slideshowImages = [
   "http://www.509autos.com/images.aspx/id-554270619/2017-ford-f250-619-p1.jpg", 
   "https://hips.hearstapps.com/amv-prod-cad-assets.s3.amazonaws.com/images/media/267365/2008-ford-f-250-super-duty-4x4-crew-cab-diesel-v-8-photo-4826-s-original.jpg",
   "https://file.kbb.com/kbb/vehicleimage/housenew/480x360/2018/2018-ford-f250%20super%20duty%20regular%20cab-frontside_ft2sdr1801.jpg",
   "https://cdn04.carsforsale.com/3/1005159/13302137/thumb/945421006.jpg"
  ];
  var $image = $(this);
  $image.addClass("hover");
  $image.data("original-src", this.src);
  slideshowIntervalId = setInterval(function() {
   slideshowIndex = ++slideshowIndex % slideshowImages.length;
   $image.attr("src", slideshowImages[slideshowIndex]);
  }, 1000);
 },
 function() {
  $(this).removeClass("hover");
  this.src = $(this).data("original-src");
  clearInterval(slideshowIntervalId);
 });

});

.thumbnail {
  width:300px;
}

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
  <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<img src="https://hips.hearstapps.com/amv-prod-cad-assets.s3.amazonaws.com/images/media/267365/2008-ford-f-250-super-duty-4x4-crew-cab-diesel-v-8-photo-4826-s-original.jpg" class="thumbnail">
</body>

代码 on("vmouseover", .. :

// JavaScript Document
$(document).ready(function() {
 var slideshowIntervalId = 0;
 var slideshowIndex = 0;


 $(".thumbnail").on("vmouseover", function() {
  var slideshowImages = [
   "http://www.509autos.com/images.aspx/id-554270619/2017-ford-f250-619-p1.jpg", 
   "https://hips.hearstapps.com/amv-prod-cad-assets.s3.amazonaws.com/images/media/267365/2008-ford-f-250-super-duty-4x4-crew-cab-diesel-v-8-photo-4826-s-original.jpg",
   "https://file.kbb.com/kbb/vehicleimage/housenew/480x360/2018/2018-ford-f250%20super%20duty%20regular%20cab-frontside_ft2sdr1801.jpg",
   "https://cdn04.carsforsale.com/3/1005159/13302137/thumb/945421006.jpg"
  ];
  var $image = $(this);
  $image.addClass("hover");
  $image.data("original-src", this.src);
  slideshowIntervalId = setInterval(function() {
   slideshowIndex = ++slideshowIndex % slideshowImages.length;
   $image.attr("src", slideshowImages[slideshowIndex]);
  }, 1000);
 },
 function() {
  $(this).removeClass("hover");
  this.src = $(this).data("original-src");
  clearInterval(slideshowIntervalId);
 });

});

.thumbnail {
  width:300px;
}

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
  <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<img src="https://hips.hearstapps.com/amv-prod-cad-assets.s3.amazonaws.com/images/media/267365/2008-ford-f-250-super-duty-4x4-crew-cab-diesel-v-8-photo-4826-s-original.jpg" class="thumbnail">
</body>

Answer 1

问题是您向 on("vmouseover") 事件添加了 2 个函数。 hover() 方法接收两个函数，一个用于 mouseover 事件，另一个用于 mouseout 事件，但 on() 方法不是这样，因为它不侦听 "counterpart" 事件。

如果你在on()方法中添加2个函数，它只会运行最后一个函数通过。这可以通过 console.log() 轻松测试，打开开发者工具 (PROTIP: F12):

// JavaScript Document
$(document).ready(function() {
    $(".thumbnail").on("vmouseover", function() {
        console.log("asd");
    },
    function() {
        console.log("asd2"); // Only this callback is executed.
    });
});

.thumbnail {
  width:300px;
}

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
  <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<img src="https://hips.hearstapps.com/amv-prod-cad-assets.s3.amazonaws.com/images/media/267365/2008-ford-f-250-super-duty-4x4-crew-cab-diesel-v-8-photo-4826-s-original.jpg" class="thumbnail">
</body>

要使其正常工作，您必须附加两个事件，vmouseover 和 vmouseout，如下所示：

// JavaScript Document
$(document).ready(function() {
 var slideshowIntervalId = 0;
 var slideshowIndex = 0;


 $(".thumbnail").on("vmouseover", function() {
  console.log("asd");
  var slideshowImages = [
   "http://www.509autos.com/images.aspx/id-554270619/2017-ford-f250-619-p1.jpg", 
   "https://hips.hearstapps.com/amv-prod-cad-assets.s3.amazonaws.com/images/media/267365/2008-ford-f-250-super-duty-4x4-crew-cab-diesel-v-8-photo-4826-s-original.jpg",
   "https://file.kbb.com/kbb/vehicleimage/housenew/480x360/2018/2018-ford-f250%20super%20duty%20regular%20cab-frontside_ft2sdr1801.jpg",
   "https://cdn04.carsforsale.com/3/1005159/13302137/thumb/945421006.jpg"
  ];
  var $image = $(this);
  $image.addClass("hover");
  $image.data("original-src", this.src);
  slideshowIntervalId = setInterval(function() {
   slideshowIndex = ++slideshowIndex % slideshowImages.length;
   $image.attr("src", slideshowImages[slideshowIndex]);
  }, 1000);
 }).on("vmouseout", function() {
  console.log("asd2");
  $(this).removeClass("hover");
  this.src = $(this).data("original-src");
  clearInterval(slideshowIntervalId);
 });

});

.thumbnail {
  width:300px;
}

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
  <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<img src="https://hips.hearstapps.com/amv-prod-cad-assets.s3.amazonaws.com/images/media/267365/2008-ford-f-250-super-duty-4x4-crew-cab-diesel-v-8-photo-4826-s-original.jpg" class="thumbnail">
</body>

将 'hover()' 更改为 'on("vmouseover")'，破坏脚本和输出 'undefined'

Changing 'hover()' to 'on("vmouseover")', ruins script and outputs 'undefined'

javascript

jquery

html

jquery-mobile