Question

由于代码气候问题，我需要清理代码。这个jquery太相似了。我该如何解决这个问题？

  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);
  });
});

Answer 1

要放大和缩小，您可以尝试：

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

Answer 2

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);
  }

}）;

希望它有用：）

Answer 3

不妨投入我的2美分......

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;

  }

}

Answer 4

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

Answer 5

您可以将放大和缩小代码缩减为一个功能。这是代码：

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

您应该尝试减少代码而不要重复自己。这是一种更好的方法，不仅因为它具有较少的代码，而且因为类似的功能被放置在一个位置。这样，如果您需要包含其他一些常见操作，则只需在一个位置添加即可。它更多的是关于更好的编码实践，而不仅仅是减少代码行数。

摆脱多余的代码？

5 个答案: