javascript - 如何防止值四舍五入到零javascript

Question

我有两个按钮，一个使 div(不同大小)变大 10 倍，另一个使它们变小 10 倍。单击两次使它们变小的按钮后，div 将被舍入为零。无论您单击使其变大的按钮多少次，它都不会变大，因为它会乘以零值。解决这个问题的标准方法是什么？这是必要的，因为在我的应用程序中，某些 div 比其他 div 大得多，因此，虽然一个 div 将小于一像素宽(然后理所应本地不可见)，但其他 div 将有数千像素宽。

更新:我的 div 实际上是代表行星直径的圆圈。我需要这些是准确的!如果我单击较小的按钮 5 次，我希望能够单击较大的按钮 5 次并使其返回到最初的精确直径。

此外，可能没有必要使 div 无限次变小或变大。对其进行限制的标准方法是什么？请参阅我的 jsfiddle 以获取我想要实现的目标的示例。 http://jsfiddle.net/dfjosh/vtxeD/12/

HTML

<a href="javascript:;" class="smaller">smaller</a>
<a href="javascript:;" class="larger">larger</a>
<div></div>

CSS

div {
    width: 50px;
    height: 50px;
    background: cornflowerblue;
}

JavaScript

$('a').click(function() {
    if($(this).hasClass('smaller')) {
        var element = $('div');
        element.animate({
            'width' : element.width() * 0.1,
            'height' : element.height() * 0.1
        });
    } else if($(this).hasClass('larger')) {
        var element = $('div');
        element.animate({
            'width' : element.width() * 10,
            'height' : element.height() * 10
        });
    }
});

Answer 1

鉴于 0 计算结果为“falsey”(或 false-ish)，您可以使用 || 运算符将 1 传递给width() 或 height() 返回 0 的事件:

var element = $('div');
element.animate({
    'width' : (element.width() || 1) * 10,
    'height' : (element.height() || 1) * 10
});

JS Fiddle demo .