点击功能只发生一次

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