Question

我对某些代码有疑问。基本上，单击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();
});

Answer 1

由于您正在检查点击处理程序中已经存在的窗口大小，因此可能不需要调整大小事件

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

jQuery toggleClass不能调整浏览器大小吗？

1 个答案: