縮短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語句

回答

相關問題