gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-28 18:26:52 24 4
gpt4 key购买 nike

我有这 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');
}
});
});

最佳答案

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

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

关于javascript - 如何缩短这些 jQuery 函数?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38937733/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com