运行 jQuery 屏幕尺寸大于1024px时的代码

Question

我需要在屏幕尺寸大于 1024 时在标题悬停时显示 body 的图像和说明，如果小于 1024 则不显示任何内容。根据我的代码，加载时一切正常，但当我将屏幕从大调整为小时，图像和描述仍然可见。我尝试编写 else 语句，但没有帮助。

$(document).ready(function(){

var $window = $(window);
  function checkWidth() {
    var windowsize = $window.width();
    if (windowsize >= 1024) {

    $('#business').hover(function() {
    $('#business_image').fadeIn('500');
    $('#business_description').fadeIn('500');
 },function() {
    $('#business_image').fadeOut('500');
    $('#business_description').fadeOut('500');
 });
 $('#sport').hover(function() {
    $('#sport_image').fadeIn('500');
    $('#sport_description').fadeIn('500');
  },function() {
    $('#sport_image').fadeOut('500');
    $('#sport_description').fadeOut('500');
 });
 } else {
    $('#business_image').hide();
    $('#business_description').hide();
    $('#sport_image').hide();
    $('#sport_description').hide();     
}
}
  checkWidth();
  $(window).resize(checkWidth);
});

非常感谢任何帮助，谢谢！

Answer 1

首先，对您的代码进行一些改进，如果 window 尺寸刚好超过 1024（例如：1300px 更改为 1250px）或低于 1024（600px 更改为 700px），您不需要做任何事情，只有越过 1024px 的点才需要调用方法。

在初始化时，lastWinWidth = 0，因此如果在页面上加载您的 window 宽度超过 1024，curWinWidth >= 1024 && lastWinWidth == 0 将为真。

这样就可以了：

if ((curWinWidth >= 1024 && lastWinWidth < 1024) ||
      (curWinWidth >= 1024 && lastWinWidth == 0)) {
} else if ((curWinWidth < 1024 && lastWinWidth >= 1024) ||
      (curWinWidth < 1024 && lastWinWidth == 0)) {
}
lastWinWidth = curWinWidth;

还 jQuery 允许您执行 multiple-selector 以便您可以将代码合并为一行：

$('#business_image, #business_description').fadeIn('500');

将 $('#sport, #business').off(); 添加到 else 语句，以便删除 #sport 和 #business 的悬停事件。

jQuery

.off()

Description: Remove an event handler.

REF: http://api.jquery.com/off/

如评论所述，请尝试清理您的代码。我的解决方案只会帮助您删除 window 宽度 < 1024 时的事件。

$(document).ready(function() {
  var lastWinWidth = 0;

  $(window).resize(resizeHandler);

  function resizeHandler() {
    var curWinWidth = $(window).width();

    if ((curWinWidth >= 1024 && lastWinWidth < 1024) ||
      (curWinWidth >= 1024 && lastWinWidth == 0)) {
      console.log('Window Width >= 1024 now');
      $('#business').hover(function() {
        $('#business_image, #business_description').fadeIn('500');
      }, function() {
        $('#business_image, #business_description').fadeOut('500');
      });
      $('#sport').hover(function() {
        $('#sport_image, #sport_description').fadeIn('500');
      }, function() {
        $('#sport_image, #sport_description').fadeOut('500');
      });
    } else if ((curWinWidth < 1024 && lastWinWidth >= 1024) ||
      (curWinWidth < 1024 && lastWinWidth == 0)) {
      console.log('Window width < 1024 now');
      $('#sport, #business').off();
      $('#business_image, #business_description, #sport_image, #sport_description').hide();
    }
    lastWinWidth = curWinWidth;
  }
  //init
  $('#business_image, #business_description, #sport_image, #sport_description').hide();
  resizeHandler();
});

#business, #sport {
  display: inline-block;
  background: aqua;
  margin: 10px;
  width: 150px;
  height: 100px;
  float: left;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<br><br><br>
<div id="business">business
  <div id="business_image">business_image</div>
  <div id="business_description">business_description</div>
</div>

<div id="sport">sport
  <div id="sport_image">sport_image</div>
  <div id="sport_description">sport_description</div>
</div>

Answer 2

您想要实现的是为 "resize" 事件添加功能。在函数内部调用函数会对用户体验产生负面影响。

如果您在外部创建函数，然后将函数附加到 window 上的调整大小事件上，它就可以完成工作。

示例代码：

function checkWidth() {
    console.log("resizing logic");
}

$(window).on("resize", checkWidth);

运行 jQuery 屏幕尺寸大于1024px时的代码

run jQuery code when screen size is more tha 1024px

javascript

jquery

resize

responsive-design

jQuery

.off()