.off（）

Question

当屏幕尺寸超过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

首先，对于您的代码几乎没有什么改进，如果窗口大小刚好超过1024（例如：1300px更改为1250px）或低于1024（600px更改为700px），您不需要做任何事情，它只是指出你需要调用方法的1024px。

在init上，lastWinWidth = 0，如果页面加载窗口宽度超过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（）

描述：删除事件处理程序。

参考：http://api.jquery.com/off/

正如评论所说，尝试清理你的代码。我的解决方案只会帮助您在窗口宽度<1时删除事件。 1024。

＆＃13;

$(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();
});

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

你想要实现的是将功能添加到＆＃34;调整大小＆＃34;事件。在函数内调用函数会对用户体验产生负面影响。

如果你在外面创建函数然后只是在窗口上的resize事件上附加函数，它就可以完成这项工作。

示例代码：

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

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

当屏幕大小超过1024px时运行jQuery代码

2 个答案:

的jQuery

.off（）