如果宽度为一定大小，jQuery会停止自定义函数的工作

Question

如果调整大小时屏幕小于 768px，如何使 imagePopUp 函数停止执行？这是我的代码：

// Image pop up
function imagePopUp() {
  $('.pop-up-img').click(function () {
    var pizza_img = $(this).attr('src');
    var close_button = "<span class='close-img-btn' onClick='closeImage()'><i class='fas fa-times'></i></span>";
    var pop_up_dark_bg = "<div class='pop-up-bg-div' onClick='closeImage()'></div>";
    var shown_img = "<div class='shown-img-div'><img id='shown-img' class='img-fluid mx-auto d-block' src='"+pizza_img+"'></div>";
    $('body').append(close_button);
    $('body').append(pop_up_dark_bg);
    $('body').append(shown_img);
  });
};

function closeImage() {
  $('.pop-up-bg-div').remove();
  $('.shown-img-div').remove();
  $('.close-img-btn').remove();
};

$(document).ready(function() {
  if ($(window).width() > 768) {
    imagePopUp();
  }
});

我试过了：

$(window).resize(function() {
  if ($(window).width() > 768) {
    imagePopUp();
  }
});

但除非调整屏幕大小，否则该功能不会启动。此外，它只是在每次调整屏幕大小时不断添加 imagePopUp 函数，所以如果你拖动屏幕调整它的大小，它会开始运行该函数 20 次。

我想要和想象的应该是这样的：

$(document).ready(function() {
  if ($(window).width() > 768) {
    on loading the page, check the width and run the function once if its more than 768px width
  }
});



$(window).resize(function() {
  if ($(window).width() > 768) {
    run the function only once if it wasnt running already.
  } else {
    when the screen goes smaller than 768, stop the function from running completely
});

现在我只是通过在宽度小于 768 像素时添加 css display: none 和 @media 到所有内容来“修复”问题。它仍然运行代码并在调整大小后将 div 和图像添加到 html，但它只是不显示它们。

编辑：

谢谢。我解决了我的问题。这可能不是最好的方法，但它可以按预期工作。如果其他人将来需要类似的东西，这里是代码：

var running = false;

function imagePopUp() {
    running = true;
    $('.pop-up-img').click(function () {
      var pizza_img = $(this).attr('src');
      var close_button = "<span class='close-img-btn' onClick='closeImage()'><i class='fas fa-times'></i></span>";
      var pop_up_dark_bg = "<div class='pop-up-bg-div' onClick='closeImage()'></div>";
      var shown_img = "<div class='shown-img-div'><img id='shown-img' class='img-fluid mx-auto d-block' src='"+pizza_img+"'></div>";
      $('body').append(close_button);
      $('body').append(pop_up_dark_bg);
      $('body').append(shown_img);
    });
};

function closeImage() {
  $('.pop-up-bg-div').remove();
  $('.shown-img-div').remove();
  $('.close-img-btn').remove();
};

$(document).ready(function() {
  if ($(window).width() > 768 && running == false) {
    imagePopUp();
  }
});

$(window).resize(function () {
  if ($(window).width() < 768) {
    $(".pop-up-img").unbind();
    running = false;
  }
  else if ($(window).width() > 768 && running == false) {
    imagePopUp();
  }
});

按照建议，我添加了变量“running = false”。 为了使该功能停止工作，我使用了“解除绑定”。 因此，当调整大小时屏幕变为 768px 时，该函数只会添加一次，因为添加后“运行”变量变为“真”，因此不再符合“else if”语句要求.

Answer 1

您可以使用.on() 函数在窗口大小调整或加载后触发事件。

无效代码示例：

var running = false;

function imagePopup() {
  running = true;
  do the rest here
}

$(window).on("load resize",function(e){
    if ($(window).width() > 768 && running == false) {
       imagePopup();
    }
});

阅读更多here 关于on() - 这是一种方法，如果您要显示图像，您始终可以使用css 选择器来查看它是否显示而不是标志（@ 987654327@, false)。

一天结束时；我相信;您想要的称为模态图像；你可以看到一个例子来说明如何做到这一点here。