javascript - 尝试压缩 JavaScript/jQuery 代码

Question

我正在尝试压缩我的代码以实现 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");
});

Answer 1

使用类而不是 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'));
});