时间戳

首页 > 解决方案 > 试图压缩 JavaScript / jQuery 代码

javascript - 试图压缩 JavaScript / jQuery 代码

问题描述

我正在尝试压缩我的代码以实现 DRY 原则，我已经对代码进行了一些尝试，并设法压缩了其中的一些但不是全部。

我要压缩的区域是代码行：

$("#modal").on("hidden.bs.modal", function() {}

如您所见，这在整个文件中重复出现，我认为这不是最佳做法。我试图将它放在一个函数本身中，但我遇到的问题是当我关闭视频时它仍然继续播放。

不确定代码是否可以进一步减少，所以我想请教一下。

// Video Play
$(function() {
  // Auto Play Modal Video
  $(".video").click(function() {
    var theModal = $(this).data("target"),
      videoSRC = $(this).attr("data-video"),
      videoSRCauto =
        videoSRC +
        "?modestbranding=1&rel=0&controls=0&showinfo=0&html5=1&autoplay=1";
  $(theModal + " video").attr("src", videoSRCauto);
  });

  $("#videoModal").on("hide.bs.modal", function() {
    $("video").attr("src", "");
  });
});

function video(vid) {
  $(vid).attr("src", $(vid).attr("src"));
}

$("#modal1").on("hidden.bs.modal", function() {
  video("#modal1 video");
});

$("#modal2").on("hidden.bs.modal", function() {
  video("#modal2 video");
});

$("#modal3").on("hidden.bs.modal", function() {
  video("#modal3 video");
});

$("#modal4").on("hidden.bs.modal", function() {
  video("#modal4 video");
});

$("#modal5").on("hidden.bs.modal", function() {
  video("#modal5 video");
});

$("#modal6").on("hidden.bs.modal", function() {
  video("#modal6 video");
});

$("#modal7").on("hidden.bs.modal", function(e) {
  video("#modal7 video");
});

标签： javascriptjquery

解决方案

使用类而不是 ID，然后您可以video动态选择后代，并将其传递给video. 例如，使用类名.modal代替#modal1, #modal2, ...：

function video($vid) {
  $vid.attr("src", $vid.attr("src"));
}
$(".modal").on("hidden.bs.modal", function() {
  video($(this).find('video'));
});

推荐阅读