时间戳

首页 > 解决方案 > jQuery toggleClass 不会触发调整浏览器大小的工作？

javascript - jQuery toggleClass 不会触发调整浏览器大小的工作？

问题描述

我对某些代码有疑问。基本上在单击 div 时，应添加/删除类 'active-sort'（此类从顶部更改 .sort-by 的位置）。在页面加载时它工作得很好，但由于某种原因，当浏览器调整大小时，toggleClass 并不总是有效（有时会，有时不会）。

我对此并不满意，所以希望有一双新的眼睛能够立即看到我做错了什么。任何帮助，将不胜感激。

function toggleSortBy() {
  var toggle = $('.sort-banner-row'),
      sortBy = $('.sort-by');

  if ($(window).width() > 1024) {
    toggle.click(function(){
      sortBy.toggleClass('active-sort');
    });
  } else {
    // other code here for smaller devices
  }
};

$(window).on('load resize', function() {
  toggleSortBy();
});

标签： javascriptjquery

解决方案

您可能不需要 resize 事件，因为您已经在点击处理程序中检查窗口大小

var toggle = $('.sort-banner-row'),
    sortBy = $('.sort-by');

toggle.click(function(){

  if ($(window).width() > 1024) {
     sortBy.toggleClass('active-sort');
  } else {
    // other code here for smaller devices
  }
});

但如果你这样做，你应该去抖动调整大小事件 //css-tricks.com/snippets/jquery/done-resizing-event

那么您可以执行以下操作：

var toggle = $('.sort-banner-row'),
    sortBy = $('.sort-by'),
    isMobile = false;

toggle.click(function(){
  if (isMobile) {
     sortBy.toggleClass('active-sort');
  } else {
    // other code here for smaller devices
  }
});

$(window).on('load resize', function() {
  // don't forget to debounce you'll see why later on in your development.
  isMobile = ($(window).width() > 1024) ? false : true;
});

推荐阅读