Question

我正在使用以下jQuery代码来重排this website左侧的视频链接

  $(document).on("click", ".cboxVideo",
    function() {
      var elementURL = $("a", this).attr("href");
      $(this).colorbox({iframe: true, href: elementURL, innerWidth: 645, innerHeight: 509});
    });
  $("#videoFront").addClass("cboxVideo");
  $("#videoFront").hover(
    function() {
      $(".playVideo", this).fadeTo(300, 1);
    }, function() {
      $(".playVideo", this).fadeTo(300, 0.35);
    });
  $("#videoFront").click(
    function(event) {
      if($(this).hasClass("cboxVideo")) { event.preventDefault(); }
      else {
        event.preventDefault();
        // Move behind UP and infront DOWN
        $(this).animate({top: 155}, 300,
          function() {
            $(this).css("z-index", "20");
          });
        $("#videoBack").animate({top: -95}, 300,
          function() {
            $("#videoBack").css("z-index", "10");
          });
        // Move behind DOWN and infront UP
        $(this).animate({top: 62}, 300);
        $("#videoBack").animate({top: -3}, 300);
        $("#videoBack").removeClass("cboxVideo");
        $(this).addClass("cboxVideo");
      }
    });
  $("#videoBack").hover(
    function() {
      $(".playVideo", this).fadeTo(300, 1);
    }, function() {
      $(".playVideo", this).fadeTo(300, 0.35);
    });
  $("#videoBack").click(
    function(event) {
      if($(this).hasClass("cboxVideo")) { event.preventDefault(); }
      else {
        event.preventDefault();
        // Move behind UP and infront DOWN
        $(this).animate({top: -95}, 300,
          function() {
            $(this).css("z-index", "20");
          });
        $("#videoFront").animate({top: 155}, 300,
          function() {
            $("#videoFront").css("z-index", "10");
          });
        // Move behind DOWN and infront UP
        $(this).animate({top: -3}, 300);
        $("#videoFront").animate({top: 62}, 300);
        $("#videoFront").removeClass("cboxVideo");
        $(this).addClass("cboxVideo");
      }
    });

因此，如果您点击后面的视频，它会转到前面。然后，如果您单击前面的视频，它将打开一个包含视频的弹出窗口我正在使用colorbox作为弹出窗口，视频是从YouTube嵌入的。

问题在于此。

一旦我点击了前面的视频并且彩盒功能被触发，它完全忽略了我的if else语句以便将来点击。所以，如果我点击第二个视频（当前位于后面），它就会转到前面，而我刚观看的视频会转到后面，即使视频现在在后面，当我再次点击它时， colorbox插件fires -.-

我该如何解决？

Answer 1

也许你可以使用jquery ui对话框并将colorbox放入其中。您可以将对话框显示为模态，在这种情况下，您无法触摸背后的视频。

Answer 2

管理自己解决这个问题，但是谢谢你们尝试：）

通过替换以下行来实现它

4.      $(this).colorbox({iframe: true, href: elementURL, innerWidth: 645, innerHeight: 509});

与

4.      $.colorbox({iframe: true, href: elementURL, innerWidth: 645, innerHeight: 509});

即使if语句为false，jQuery colorbox也会触发点击

2 个答案: