より効率的な要素のマッチングとクラスの変更

Question

私はここで私の関数でより効率的な方法を探しています。私はフォームのチェックボックスを変更して、私のアプリケーションのさまざまな領域間で要素を一致させています。明らかに冗長性はたくさんありますが、クラス名が重要なので、単純化するための最良の方法についてはわかりません。ここに私の機能は次のとおりです。

$(function() { 
 
    $(document).on('click', '#group-element', function() { 
 
    var targets = $('.rectangle.selected'); 
 
    $(targets).each(function() { 
 
     var matchingHeight = $(this).height(); 
 
     var matchingWidth = $(this).width(); 
 
     $(".rectangle.null").each(function() { 
 
    \t  if ($(this).width() === matchingWidth) { 
 
    \t  \t $(this).removeClass('matched individual-element missing-element incomplete-element').addClass('group-element'); 
 
    \t  } 
 
    \t }); 
 
    }); 
 
    $(targets).removeClass('selected individual-element missing-element incomplete-element').addClass('group-element'); 
 
    $("#attribute-form .ui.radio.checkbox").removeClass('checked'); 
 
    $(".group").prop("checked", true).parent().addClass('checked'); 
 
    }); 
 
    $(document).on('click', '#individual-element', function() { 
 
    var targets = $('.rectangle.selected'); 
 
    $(targets).each(function() { 
 
     var matchingHeight = $(this).height(); 
 
     var matchingWidth = $(this).width(); 
 
     $(".rectangle.null").each(function() { 
 
    \t  if ($(this).width() === matchingWidth) { 
 
    \t  \t $(this).removeClass('matched group-element missing-element incomplete-element').addClass('individual-element'); 
 
    \t  } 
 
    \t }); 
 
    }); 
 
    $(targets).removeClass('selected group-element missing-element incomplete-element').addClass('individual-element'); 
 
    $("#attribute-form .ui.radio.checkbox").removeClass('checked'); 
 
    $(".individual").prop("checked", true).parent().addClass('checked'); 
 
    }); 
 
    $(document).on('click', '#missing-element', function() { 
 
    var targets = $('.rectangle.selected'); 
 
    $(targets).each(function() { 
 
     var matchingHeight = $(this).height(); 
 
     var matchingWidth = $(this).width(); 
 
     $(".rectangle.null").each(function() { 
 
    \t  if ($(this).width() === matchingWidth) { 
 
    \t  \t $(this).removeClass('matched group-element individual-element incomplete-element').addClass('missing-element'); 
 
    \t  } 
 
    \t }); 
 
    }); 
 
    $(targets).removeClass('selected group-element individual-element incomplete-element').addClass('missing-element'); 
 
    $("#attribute-form .ui.radio.checkbox").removeClass('checked'); 
 
    $(".missing").prop("checked", true).parent().addClass('checked'); 
 
    }); 
 
    $(document).on('click', '#incomplete-element', function() { 
 
    var targets = $('.rectangle.selected'); 
 
    $(targets).each(function() { 
 
     var matchingHeight = $(this).height(); 
 
     var matchingWidth = $(this).width(); 
 
     $(".rectangle.null").each(function() { 
 
    \t  if ($(this).width() === matchingWidth) { 
 
    \t  \t $(this).removeClass('matched group-element missing-element individual-element').addClass('incomplete-element'); 
 
    \t  } 
 
    \t }); 
 
    }); 
 
    $(targets).removeClass('selected group-element missing-element individual-element').addClass('incomplete-element'); 
 
    $("#attribute-form .ui.radio.checkbox").removeClass('checked'); 
 
    $(".incomplete").prop("checked", true).parent().addClass('checked'); 
 
    }); 
 
});

Answer 1

あなたが委任clickハンドラ内で複数のセレクタを使用してこのコードアップを乾燥させることができます。

各機能で異なるように見えるのは、.rectangle.null要素に追加されたクラスだけです。それがクリックされた要素のidと一致するとして、あなたはだけではなく、そこからidプロパティを使用することができます。

$(function() { 
 
    $(document).on('click', '#group-element, #individual-element, #missing-element, #incomplete-element', function() { 
 
    var el = this; 
 
    $('.rectangle.selected').each(function() { 
 
     var matchingWidth = $(this).width(); 
 
     $(".rectangle.null").each(function() { 
 
     if ($(this).width() === matchingWidth) { 
 
      $(this).removeClass('matched individual-element missing-element incomplete-element').addClass(el.id); 
 
     } 
 
     }); 
 
    }).removeClass('selected individual-element missing-element incomplete-element').addClass('group-element'); 
 

 
    $("#attribute-form .ui.radio.checkbox").removeClass('checked'); 
 
    $(".group").prop("checked", true).parent().addClass('checked'); 
 
    }); 
 
});