缩短jQuery多个If语句

我有三个包含if/else if语句的jQuery函数。基本上，每个不同的功能根据窗口宽度是否小于或大于特定值来切换/删除不同的CSS类。缩短jQuery多个If语句

所有的功能都是非常类似类似，我一直试图缩短它们/将它们合并成一个函数。我很确定它可以很容易地缩短，但我不知道如何！

这里是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'); 
    } 
}); 
});

来源

2016-08-12 Luka Kerr

要保留所有的功能，我不得不创建了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

的只是调用每个类别的功能上点击

来源

2016-09-16 12:33:19

您可以创建一个函数，它有两个参数：宽度&类名。

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

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

来源

2016-08-12 11:25:37

对主类使用绑定函数，然后使您的条件类似于以前的函数。例如：$（”。mainClass'）的bind（）

来源

2016-08-12 11:33:52

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

来源

2016-08-12 11:41:41

缩短jQuery多个If语句

回答

相关问题