Question

我有三个包含if / else if语句的jQuery函数。基本上每个不同的函数根据窗口宽度是否小于或大于某个值来切换/删除不同的css类。

所有功能非常类似，我一直试图缩短它们/将它们组合成一个功能。我很确定它可以很容易地缩短，但我无法弄清楚如何！

这是jQuery：

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

使用主类的绑定函数，然后使您的条件类似于以前的函数。例如：$（＆＃39; .mainClass＆＃39;）。bind（）

Answer 2

缩短jQuery代码的格式

$(document).ready(function($) {
    $('.exampleimg').click(function() {

        $('.about').hide(600);

        screenwidth= var windowWidth = $(window).width();
        var classname="exampleimgopen";
        if(screenwidth<670){ classname = "exampleimgopen2"; };
        else if(screenwidth<540){ classname = "exampleimgopen3"; };

        $(this).toggleClass(classname);
    });
});

Answer 3

你可以创建一个带有两个参数的函数：width＆amp;班级名称。

function YourFunc(width, className)
{
    var windowWidth = $(window).width();

    $('.about').hide(600);

    if (windowWidth < width && $(this).hasClass(className)) {
        $(this).removeClass(className);
    }
    else if (windowWidth < width) {
        $('.exampleimg').removeClass(className);
        $(this).addClass(className);
    }
}

并在需要的地方调用此函数并传递相关参数。

Answer 4

保留我创建一个带有3个变量的函数的所有功能：

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

var lessThan = function(a, b) { return a < b; };
var greaterThan = function(a, b) { return a > b; };

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

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

并且还创建两个变量来管理小于和大于670px

只需点击

即可调用每个班级的功能

缩短jQuery Multiple If语句

4 个答案: