冗長コードを削除しますか？

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

コードを減らし、繰り返しはしないでください。これはより良いアプローチであり、コードが少なくなるだけでなく、同様の機能が1つの場所に配置されるためです。このように、他の共通のアクションを含める必要がある場合は、1つの場所に追加するだけです。コードの行数を減らすよりも優れたコーディング方法です。