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

Question

I have an issue with some code. Basically on click of a div the class 'active-sort' should be added/removed (This class changes the position of .sort-by from the top). On page load it works great but for some reason the toggleClass doesn't always work when the browser is resized (sometimes it does, sometimes it doesn't).

I'm not great with this, so was hoping a new set of eyes might be able to instantly see what I'm doing wrong. Any help would be appreciated.

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

it's possible you may not need the resize event since you're checking the window size already in the click handler

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

but if you do you should debounce the resize event //css-tricks.com/snippets/jquery/done-resizing-event

then you could do something like:

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