javascript - 单击事件更改属性(太快)

Question

我有一个 each 函数来确定何时单击 ID 中的链接。单击发生后，它会获取相关属性并将它们关联到主图像。

此功能还可以包括一个视频，因此如果 html 包含一个名为 #video 的 ID它采用视频属性并将其粘贴在预定义的 <video> 中.

我目前还有其他功能，这些功能不在下面的笔中，例如 destroyZoom() (这会破坏专用于 .main-image 的缩放功能)。

问题:当用户在图像(尤其是视频)之间切换时，缩放层会自动在图像顶部激活。 (我已经为函数放置了占位符)。

有人可以推荐一种优雅的方式来处理这种情况，或者我是如何编写这个功能的。

请注意:5号图片是视频。

编辑:更新了下面的 CODEPEN 和代码以包含缩放功能

$('#product-gallery-super').children().click(function(e) {
  e.preventDefault();
  var prodImg = $(this).attr('data-image');
  var imgSrc = $(this).children().attr('src')
  var vidCheck = false;
  var mainImg = $('.main-image');

  if (imgSrc != 'http://yi.yoga/images/cs.jpg') {

    $(this).addClass("active-thumbnail").siblings().removeClass("active-thumbnail");

    if ($(this).attr('id') == 'video') {
      $('.main-image').hide();

      if (!$('.product-video').hasClass('product-video')) {

        var videoLink = $(this).attr('href');
        var videoImg = $(this).find('img').attr('src');

        var video = '<div class="video-container"> <video class="flat-video product-video" bgcolor="#FFFFFF" id="mainVideo" poster="' + videoImg + '" autoplay autobuffer width="100%" height="auto"> <source src="' + videoLink + '"> <object type="application/x-shockwave-flash" data="http://vjs.zencdn.net/c/video-js.swf" width="100%" height="auto"> <param name="allowfullscreen" value="false"> <param name="allowscriptaccess" value="always"> <param name="flashvars" value="file=' + videoLink + '"> <!--[if IE]><param name="movie" value="http://vjs.zencdn.net/c/video-js.swf"><![endif]--> <img src="' + videoImg + '" width="100%" height="auto" alt="Video"></object> </video>  <span class="playPause icon-play off"></span> <div class="controls-bar off"> <div class="duration"> <div class="duration-amount"></div> </div> </div> <div class="top-controls-bar off"> <div class="info"> </div> </div> </div>';

        $('.container').prepend(video);

        // START VIDEO FUNCTION videoInitate();

      }

    } else {
      mainDestroy()

      $('.video-container').remove();

      $('.main-image').show();
      $('.main-image').attr('src', prodImg);

      $('.product-zoom').elevateZoom({
        cursor: 'pointer',
        zoomType: "window",
        zoomWindowFadeIn: 500,
        zoomWindowFadeOut: 750,
        responsive: true,
        borderSize: 1,
        borderColour: '#DDDDDD',
        lensBorder: 1,
        lensSize: 200,
        scrollZoom: false,
        zoomWindowFadeOut: 1,
      });

    }

  }

});

function mainDestroy() {
  $('.zoomContainer').remove();
  $('.product-zoom').removeData('elevateZoom');
  $('.product-zoom').removeData('zoomImage');
}

.active-thumbnail {
  display: inline-block;
  border: 1px solid black;
}
#product-gallery-super img {
  width: 61px;
  height: 79px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script src="http://www.elevateweb.co.uk/wp-content/themes/radial/jquery.elevatezoom.min.js"></script>

<div class="container">
  <img class="main-image image-resize product-zoom" src="http://placehold.it/300x400?text=1" data-zoom-image="http://placehold.it/1000x2000?text=1" onerror="comingSoonMain(this)">

  <div id="product-gallery-super">
    <a href="#" class="product-zoom-gallery active-thumbnail" data-image="http://placehold.it/300x400?text=1">
      <img src="http://placehold.it/61x79?text=1">
    </a>
    <a href="#" class="product-zoom-gallery" data-image="http://placehold.it/300x400?text=2">
      <img src="http://yi.yoga/images/cs.jpg">
    </a>
    <a href="#" class="product-zoom-gallery" data-image="http://placehold.it/300x400?text=3">
      <img src="http://placehold.it/61x79?text=3">
    </a>
    <a href="#" class="product-zoom-gallery" data-image="http://placehold.it/300x400?text=4">
      <img src="http://placehold.it/61x79?text=4">
    </a>
    <a href="http://simplypx.com/images/Prometheus.mp4" id="video" class="product-zoom-gallery" data-image="http://placehold.it/300x400?text=VID">
      <img src="http://placehold.it/61x79?text=5">
    </a>
    <a href="#" class="product-zoom-gallery" data-image="http://placehold.it/300x400?text=6">
      <img src="http://placehold.it/61x79?text=6">
    </a>

  </div>

</div>

Answer 1

你想过这个吗？如果问题是视频在缩小到可管理的尺寸之前短暂占据了整个屏幕，请尝试使用 <video class="flat-video product-video" bgcolor="#FFFFFF" id="mainVideo" poster="' + videoImg + '" autoplay autobuffer width="300px" height="auto">而不是 width=100% .