Функция на клике появляется только один раз

Question

Я пытаюсь получить карту для увеличения или уменьшения масштаба. Однако после первого щелчка карта не может снова масштабироваться. Я использую jquery animate прямо сейчас, но если есть лучшее решение, я бы тоже хотел это знать.

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