return後の文をひとつの処理としてまとめたい

Question

###前提・実現したいこと
タイトルの通りなのですが、jQueryreturn後の文をひとつの処理としてまとめたいです。

###該当のソースコード
以下return以後の処理はいずれも同じものです。

if ($('input').is(':checked')) {
  $('#test01').show().filter(function () {
    return $(this).data('w') > $d && $W ==  true ||
    $(this).data('h') > $dH && $W ==  true ||
    $(this).data('d') > $dD && $W ==  true ||
    $(this).data('d') > $d && $D ==  true ||
    $(this).data('w') > $dW && $D ==  true ||
    $(this).data('h') > $dH && $D ==  true ||
    $(this).data('h') > $d && $H ==  true ||
    $(this).data('w') > $dW && $H ==  true ||
    $(this).data('d') > $dD && $H ==  true;
  }).hide();
}else {
  $('#test02').show().removeClass('hoge').filter(function () {
    return $(this).data('w') > $d && $W ==  true ||
    $(this).data('h') > $dH && $W ==  true ||
    $(this).data('d') > $dD && $W ==  true ||
    $(this).data('d') > $d && $D ==  true ||
    $(this).data('w') > $dW && $D ==  true ||
    $(this).data('h') > $dH && $D ==  true ||
    $(this).data('h') > $d && $H ==  true ||
    $(this).data('w') > $dW && $H ==  true ||
    $(this).data('d') > $dD && $H ==  true;
  }).hide().addClass('hoge');
}

上記のように冗長なソースコードにならないよう、別で関数を用意する等の方法で処理を使いまわすことができればと考えております。

初歩的な質問かと思いますが、このような処理のまとめ方に関していまひとつ理解しきれておりません。どうぞ宜しくお願い致します。

Answer 1

まさに、「別で関数を用意する」ことで実現できます。

function judge () {
  return $(this).data('w') > $d && $W ==  true ||
  $(this).data('h') > $dH && $W ==  true ||
  $(this).data('d') > $dD && $W ==  true ||
  $(this).data('d') > $d && $D ==  true ||
  $(this).data('w') > $dW && $D ==  true ||
  $(this).data('h') > $dH && $D ==  true ||
  $(this).data('h') > $d && $H ==  true ||
  $(this).data('w') > $dW && $H ==  true ||
  $(this).data('d') > $dD && $H ==  true;
}
if ($('input').is(':checked')) {
  $('#test01').show().filter(judge).hide();
}else {
  $('#test02').show().removeClass('hoge').filter(judge).hide().addClass('hoge');
}

Comments

[退会済みユーザー]

ご回答ありがとうございます。
ご指摘の方法で実現することができました。このように関数を作成してfilter(judge)とすれば良いのですね。関数を作成するところまでは思いついたのですが、judge()を入れる箇所が分からず悶々としておりました。
ありがとうございます。

Answer 2

idで指定したタグをshowしてfilterしてhideしていますが
これはtoggleでやるほうが処理は簡単になります。
ただしいずれにしても複数のdata-*属性を持たして処理してるようなので
データ管理を調整する方が現実的ですね

Comments

[退会済みユーザー]

ご指摘ありがとうございます。処理の効率化について、確かに煩雑な印象もありますが、まだ知識が追いつかず、ご指摘を参考により効率的なコードが書けるよう勉強してまいります。

Answer 3

「$d」や「$W」といった変数のスコープが分からないので、外から与えることにして、

function doSomething(obj, $d, $dD, $dH, $dW, $H, $W) {
  // ここにreturn分に書かれていた判定処理を記述
  // ただし、$(this)はobjに変更して。
}

みたいにfunction書いて、

if ($('input').is(':checked')) {
  $('#test01').show().filter(function () {
    return doSomething($(this), $d, $dD, $dH, $dW, $H, $W);
 }).hide();
}else {

みたいにすれば短くなりますな。

Comments

[退会済みユーザー]

いつもご回答ありがとうございます。このような方法があるとは思いつきませんでした。
是非とも今後の参考にさせていただきたいと思います。