get rid of redundant code?

Question

I need to clean my code because of code climate issues. This jquery is too similar. How can I fix this?

  var angle = 0;
  $('.rotate-receipt').on('click', function () {
      var index = $(this).data('button-index');
      angle = (angle + 90)%360;
      var className = 'rotate' + angle;
      $('#receipt-image-'+index).removeClass().addClass(className);
  });

  $('.zoom-in').on('click', function () {
      var index = $(this).data('button-index');
      var image = $('#receipt-image-'+index);
      image.width(image.width() + 100);
  });

  $('.zoom-out').on('click', function () {
      var index = $(this).data('button-index');
      var image = $('#receipt-image-'+index);
      image.width(image.width() - 100);
  });
});

This is off topic here. Perhaps more on topic at http://codereview.stackexchange.com/ - possibly duplicate of http://stackoverflow.com/questions/10511897/assigning-more-than-one-class-for-one-event — mplungjan, Sep 29 '16 at 08:17
@J.Doe, leave the link to your question on "CodeReview" and I'll help you — RomanPerekhrest, Sep 29 '16 at 08:19
@RomanPerekhrest cannot post there, because added this question here already :( im blocked. please help. — J. Doe, Sep 29 '16 at 08:22

score 1 · Answer 1 · answered Sep 29 '16 at 08:19

For zoom in and zoom out you can try this:

$('.zoom-in,.zoom-out').on('click', function() {
      var index = $(this).data('button-index');
      var image = $('#receipt-image-'+index);
      if ($(this).hasClass('zoom-out')) {
         image.width(image.width() - 100);
      }
      else {
         image.width(image.width() + 100);
      }
});

score 0 · Answer 2 · answered Sep 29 '16 at 08:21

var angle = 0;
$('.rotate-receipt,.zoom-in,.zoom-out').on('click', function () {
  var index = $(this).data('button-index');
  var image = $('#receipt-image-'+index);

  if($(this).hasClass("rotate-receipt")) {
    angle = (angle + 90)%360;
    var className = 'rotate' + angle;
    $('#receipt-image-'+index).removeClass().addClass(className);
  }
  else if($(this).hasClass("zoom-in")) {
    image.width(image.width() + 100);
  }
  else if($(this).hasClass("zoom-out")) {
    image.width(image.width() - 100);
  }

});

Hope it will be useful :)

score 0 · Answer 3 · answered Sep 29 '16 at 08:25

Might as well throw in my 2 cents...

var angle = 0;
$('.rotate-receipt').on('click', function () {
  transform( this, 'rotate-receipt' );
});

$('.zoom-in').on('click', function () {
  transform( this, 'zoom-in' );
});

$('.zoom-out').on('click', function () {
  transform( this, 'zoom-out' );
});

function transform( el, type ) {

  var index = $(el).data('button-index');
  var image = $('#receipt-image-'+index);

  switch( type ) {

    case 'rotate-receipt':
      angle = (angle + 90)%360;
      var className = 'rotate' + angle;
      $('#receipt-image-'+index).removeClass().addClass(className);
      break;

    case 'zoom-in':
      image.width(image.width() + 100);
      break;

    case 'zoom-out':
      image.width(image.width() - 100);
      break;

  }

}

score 0 · Answer 4 · answered Sep 29 '16 at 08:30

    $('.rotate-receipt, .zoom-in, .zoom-out').on('click' , function() {
        var index = $(this).data('button-index');
        if ($(this).hasClass('rotate-receipt')) {
            angle = (angle + 90)%360;
            var className = 'rotate' + angle;
            $('#receipt-image-'+index).removeClass().addClass(className);
        } else {
            var image = $('#receipt-image-'+index);
            var toAdd = $(this).hasClass('zoom-out') ? - 100 : 100;
            image.width(image.width() + toAdd);
        }
    })

score 0 · Answer 5 · answered Sep 29 '16 at 08:31

You can reduce the code of zoom in and out into one function. Here is the code:

$('.zoom-in').on('click', zoom_in_out(100));
$('.zoom-out').on('click', zoom_in_out(-100));

function zoom_in_out(zoom_value) {
  var index = $(this).data('button-index');
  var image = $('#receipt-image-'+index);
  image.width(image.width() + zoom_value);
});

You should try to reduce the code and not repeat yourself. This is a better approach not only beacuse it has less code but becasue the similar function is placed in one location. This way if you need to include some other common action, you just need to add in one place. It is more about better coding practice than just reducing the number of lines of code.

get rid of redundant code?

5 Answers5