CODEWITHSUNDEEP
jquery
Todd Williams
Todd Williams

Reputation: 267

More efficient function for matching elements and changing classes

I'm looking for a more efficient way in my function here. I'm matching elements between different areas of my app, changing a form checkbox as well. Obviously there is a lot of redundancy, but I'm not sure about the best way to simplify it since the class names are important. Here is my function:

$(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');
  });
});

Upvotes: 0

Views: 31

Answers (1)

Rory McCrossan
Rory McCrossan

Reputation: 337656

You can DRY this code up by using multiple selectors in the delegated click handler.

The only thing that seems different in each function is the class that's added to the .rectangle.null element. As it matches the id of the clicked element, you can just use the id property from that instead:

$(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');
  });
});

Upvotes: 1

Related Questions