これらのjQuery関数を短縮するには？

Question

は、私は基本的に同じことを行うこれら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'); 
    } 
    }); 
}); 

Answer 1

3つの機能です。

一般的に、同様の機能をリファクタリングするときは、可変データを引数として取り、クロージャを介してそのデータにアクセスできる関数を返す単一のファクトリ関数を作成するのが良い方法です。

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

このようなことをやっての利点は、あなただけ、あなたがそれに与えたデータに基づいて、リスナーのコールバック関数の異なるバージョンを作成し、単一の関数を書くことです。それは幅が< 540だったときに起こる持っていると思った何不明だが、

Answer 2

私が思うには、かなりの機能を返すために優れているのはなぜ代わりに

jQuery(document).ready(function($) { 
    $('.exampleimg').click(function() { 
     var width = $(window).width(); 
     var classes = []; 
     if (width < 540) { 
      classes.push('exampleimgopen3'); 
     } 
     if ($(window).width() < 670) { 
      classes.push('exampleimgopen2'); 
     } 
     if ($(window).width() >= 670) { 
      classes.push('exampleimgopen'); 
     } 
     classes.forEach(function(class) { 
      $('.exampleimg').removeClass(class); 
      if (!$(this).hasClass(class)) { 
       $(this).addClass(class); 
      } 
     }); 
    }); 
});