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'));
});

尝试压缩JavaScript / jQuery代码

1 个答案: