更有效的匹配元素和更改类的函数

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() {
  	    if ($(this).width() === matchingWidth) {
  	    	$(this).removeClass('matched individual-element missing-element incomplete-element').addClass('group-element');
  	    }
  	  });
    });
    $(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() {
  	    if ($(this).width() === matchingWidth) {
  	    	$(this).removeClass('matched group-element missing-element incomplete-element').addClass('individual-element');
  	    }
  	  });
    });
    $(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() {
  	    if ($(this).width() === matchingWidth) {
  	    	$(this).removeClass('matched group-element individual-element incomplete-element').addClass('missing-element');
  	    }
  	  });
    });
    $(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() {
  	    if ($(this).width() === matchingWidth) {
  	    	$(this).removeClass('matched group-element missing-element individual-element').addClass('incomplete-element');
  	    }
  	  });
    });
    $(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');
  });
});