Question

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

我需要所有这3个功能的功能，但想以某种方式将它们组合/缩短为一个功能。我试过，但我的代码一直在破碎任何人都可以帮助缩短它们吗？

以下是3个功能

{{1}}

Answer 1

我需要所有这3个功能的功能，但想以某种方式将它们组合/缩短为一个功能。

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

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

这样做的好处是你只编写一个函数，然后根据你给它的数据创建不同版本的监听器回调函数。

Answer 2

我认为可能更接近你想要的东西，虽然当宽度<1时，你不清楚你想要发生什么。 540.可能想要使用if .. then ... else代替

jQuery(document).ready(function($) {
    $('.exampleimg').click(function() {
        var width = $(window).width();
        var classes = [];
        if (width < 540) {
            classes.push('exampleimgopen3');
        }
        if ($(window).width() < 670) {
            classes.push('exampleimgopen2');
        }
        if ($(window).width() >= 670) {
            classes.push('exampleimgopen');
        }
        classes.forEach(function(class) {
            $('.exampleimg').removeClass(class);
            if (!$(this).hasClass(class)) {
                $(this).addClass(class);
            }
        });
    });
});

如何缩短这些jQuery函数？

2 个答案: