Verkürzen Sie jQuery Mehrere If-Anweisungen

Question

Ich habe drei jQuery-Funktionen, die eine if/else if-Anweisung enthalten. Grundsätzlich schaltet jede andere Funktion eine andere CSS-Klasse ein/aus, je nachdem, ob die Fensterbreite kleiner oder größer als ein bestimmter Wert ist.

Alle Funktionen sind sehr ähnlich und ich habe versucht, sie zu verkürzen/kombinieren sie in einer Funktion. Ich bin mir ziemlich sicher, dass es leicht verkürzt werden kann, aber ich kann nicht herausfinden, wie! Hier

ist die 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

sein sollte, alle Funktionen zu behalten hatte ich eine Funktion zu erstellen, die drei Variablen haben:

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

und schaffen auch zwei Variablen die weniger als und mehr als 670 Pixeln

die rufen Sie einfach die Funktionen für jede Klasse auf Klick

verwalten

Answer 2

Sie können eine Funktion erstellen, die zwei Argumente nimmt: Breite & Klassennamen.

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

Und rufen Sie diese Funktion auf, wo immer Sie sie brauchen, und übergeben Sie die relevanten Argumente.

Answer 3

Verwenden Sie Binding-Funktion für Hauptklasse dann machen Sie Ihre Bedingungen ähnlich wie vorherige Funktion. Beispiel:. $ (‘. Mainclass) bind()

Answer 4

Shorten Format des Codes 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); 
    }); 
});