功能点击只发生一次

Question

我试图让地图放大或缩小点击。然而，第一次点击后，地图无法再次缩放。我现在正在使用jquery动画，但如果有更好的解决方案，我也想知道。

var mapWidth = $('.vector-map img').width(); 

    $('.zoom-in').on('click', function() { 
    $('.vector-map img').animate({width: mapWidth + 50}, 'slow'); 
    }); 

    $('.zoom-out').on('click', function() { 
    $('.vector-map img').animate({width: mapWidth - 50}, 'slow'); 
    }); 

Answer 1

你只在初始设置获取地图的宽度，而不是每次放大之前的时候，试试：

var mapWidth = $('.vector-map img').width(); 

    $('.zoom-in').on('click', function() { 
    mapWidth = $('.vector-map img').width(); 
    $('.vector-map img').animate({width: mapWidth + 50}, 'slow'); 
    }); 

    $('.zoom-out').on('click', function() { 
    mapWidth = $('.vector-map img').width(); 
    $('.vector-map img').animate({width: mapWidth - 50}, 'slow'); 
    });