javascript - 如何缩短这些 jQuery 函数？

Question

我有这 3 个 jQuery 函数，它们基本上做同样的事情，但它们有一点不同(窗口宽度，以及被删除/切换的类)

我需要所有这 3 个函数的功能，但想以某种方式将它们组合/缩短为一个函数。我已经尝试过，但我的代码不断被破坏 谁能帮忙缩短它们？

这是3个函数

jQuery(document).ready(function($) {
  $('.exampleimg').click(function() {
    $('.about').hide(600);
    if (($(window).width() > 670) && ($(this).hasClass('exampleimgopen'))) {
      $(this).removeClass('exampleimgopen');
    } else if ($(window).width() > 670) {
      $('.exampleimg').removeClass('exampleimgopen');
      $(this).addClass('exampleimgopen');
    }
  });
});

jQuery(document).ready(function($) {
  $('.exampleimg').click(function() {
    $('.about').hide(600);
    if (($(window).width() < 670) && ($(this).hasClass('exampleimgopen2'))) {
      $(this).removeClass('exampleimgopen2');
    } else if ($(window).width() < 670) {
      $('.exampleimg').removeClass('exampleimgopen2');
      $(this).addClass('exampleimgopen2');
    }
  });
});

jQuery(document).ready(function($) {
  $('.exampleimg').click(function() {
    $('.about').hide(600);
    if (($(window).width() < 540) && ($(this).hasClass('exampleimgopen3'))) {
      $(this).removeClass('exampleimgopen3');
    } else if ($(window).width() < 540) {
      $('.exampleimg').removeClass('exampleimgopen3');
      $(this).addClass('exampleimgopen3');
    }
  });
});

Answer 1

I need the functionality of all these 3 functions, but want to somehow combine them/shorten them into one function.

通常，重构类似函数时的一个好方法是创建一个工厂函数，该函数将变量数据作为参数，并返回一个可以通过其闭包访问该数据的函数。

function myFactory(conditionFunc, windowWidth, cssClass) {
  return function() {
    $('.about').hide(600);
    var windowCondition = conditionFunc($(window).width(), windowWidth);
    if (windowCondition && ($(this).hasClass(cssClass))) {
      $(this).removeClass(cssClass);
    } else if (windowCondition) {
      $('.exampleimg').removeClass(cssClass);
      $(this).addClass(cssClass);
    }
  }
}

然后你可以调用这个函数3次来构建你的函数:

// helper methods that will perform '<' or '>' on window width
var lessThan = function(a, b) { return a < b; };
var greaterThan = function(a, b) { return a > b; };

var func1 = myFactory(greaterThan, 670, 'exampleimgopen');
var func2 = myFactory(lessThan, 670, 'exampleimgopen2');
var func3 = myFactory(lessThan, 540, 'exampleimgopen3');

然后您可以将每个传递给相应的监听器。

$('.exampleimg').click(func1);
$('.exampleimg').click(func2);
$('.exampleimg').click(func3);

这种方式的优点是您只需编写一个函数，然后根据您提供的数据创建不同版本的监听器回调函数。