为什么放大(css) via jQuery不能工作

Question

我知道这也许是个愚蠢的问题，但我做了很多研究，却找不到原因。我已经实现了两个简单的jQuery函数来放大和放大

$("#zoomOutBtn").click(function(){
    var zoom = $("#treeContainer").css("zoom");
    zoom = ((zoom - 0.1) * 100) + "%";
    $("#myDiv").css("zoom", zoom);
  });

  $("#zoomInBtn").click(function(){
    var zoom = $("#treeContainer").css("zoom");
    zoom = ((zoom + 0.1) * 100) + "%";
    $("#myDiv").css("zoom", zoom);
  });

问题是，放大工作，但放大不会，除非运行前放大。

Answer 1

+是重载的，当您将它与数字一起使用时，它意味着添加，但是当您使用它时，意味着连接，其中至少有一个操作数是字符串。您从css获得的值是一个字符串，因此zoom + 0.1将最终将字符0、.和1追加到字符串的末尾(例如，100%0.1或其他什么)，而不是向其添加值0.1。

若要修复它，请先转换为数字：

zoom = ((parseFloat(zoom) + 0.1) * 100) + "%";

(我在那里使用parseFloat允许浏览器在返回的值中包含%。parseFloat在第一个无效字符处停止，而在这种情况下，Number(zoom)或+zoom将导致NaN。但是，查看您的代码，您可能需要一个专门处理这种情况的分支，因为它的数学是不同的。)

zoom - 0.1工作的原因是，与+不同，-没有重载；它只有一个数字意义。因此，它隐式地将其参数强制为number，其中如果两个操作数都是字符串，则+不会。