擺脫冗餘代碼？

由於代碼環境問題，我需要清理我的代碼。這個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); 
    }); 
});

來源

2016-09-29 J. Doe

這是這裏的主題。也許更多的話題在http://codereview.stackexchange.com/ - 可能重複http://stackoverflow.com/questions/10511897/assigning-more-than-one-class-for-one-event – mplungjan

@J。 Doe，將鏈接留在「CodeReview」上的問題上，我會幫你 – RomanPerekhrest

你的HTML樣本也會非常有用。 –

對於放大和縮小，你可以試試這個：

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

來源

2016-09-29 08:19:26

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

}）;

希望這將是有用的:)

來源

2016-09-29 08:21:30

可能會在我的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; 

    } 

}

來源

2016-09-29 08:25:40

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

來源

2016-09-29 08:30:10 Beginner

您可以減少和縮小成一個功能變焦的代碼。這裏是代碼：

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

你應該儘量減少代碼，不要重複自己。這是一種更好的方法，不僅因爲它具有較少的代碼，而且因爲類似的功能被放置在一個位置。這樣，如果您需要包含其他一些常見操作，則只需在一個地方添加即可。更重要的是更好的編碼實踐，而不僅僅是減少代碼行數。

來源

2016-09-29 08:31:20 iiR

擺脫冗餘代碼？

回答

相關問題