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 });返回{{1}}：

{{1}}

JS Fiddle demo

Answer 2

在我看来，问题不在于div会因为让他们再次离开它而变为零。

这很容易做到：

'width' : (element.width() * 10) || 1

如何运作：如果element.width()返回0，当然0 * 10也是0。 0是假名，因此||会使用1。

或者如果您愿意：

'width' : (element.width() || 1) * 10

......只是更快地开始。： - ）

更多：JavaScript's Curiously Powerful OR Operator (||)

Answer 3

当使div变小时，您只需要检查宽度是否小于1。如果你想要保持比例，也可以添加高度限制。

我正在添加另一个解决方案here。

使用浮点数你将无法获得确切的返回值：0.1。由于您使用的是十进制数，因此浏览器会以不同方式处理舍入。例如，IE将仅使用CSS中的十进制精度来表示JS计算的浮点数。其他浏览器将使用三位小数，但它们将决定结果是按原样使用还是更改，例如FF可以将计算出的13.205转换为使用过的13.207。

最好是你自己决定固定的硬编码范围。或者在你去的时候记住新的计算宽度和高度，并在你回去时应用它们。我想这将涉及构建两个阵列，一个用于较小，一个用于较大。否则转到画布或svg。

Answer 4

我认为这就是你要找的东西：

var element = $('div');
element.animate({
    'width' : Math.max(element.width() * 10), 50),
    'height' : Math.max(element.width() * 10), 50)
});

Answer 5

只是检查它是否仍处于合理的边界，也许是这样：

'width' : ( element.width() > 0.1 ? element.width() * 0.1 : element.width() )
'height' : ( element.height() > 0.1 ? element.height() * 0.1 : element.height() )

这样它实际上可以变得非常小。但你应该问自己哪个显示器能够显示大小为0.25的像素？至少有人可以假设Apple的视网膜显示器能够显示0.5像素。

Answer 6

的 jsFiddle Demo 的

防止它达到0的一种方法是调整高度和宽度，检查0，然后重新调整回缓存值（如果它变为0）。

var w = element.width(); element.width(w*0.1); var testWidth = element.width(); element.width(w); if(testWidth == 0)return; var h = element.height(); element.height(h*0.1); var testHeight = element.height(); element.height(h); if(testHeight == 0)return;

Answer 7

嗯，事实证明，我将回答我自己的问题。我感谢所有得到的帮助。我确定我没有找到你们的答案的原因是因为我没有说出正确的问题，而且我没有提供足够的细节。无论如何，这是我的问题的解决方案：

我最初在css中将所有div减少了1000倍。这意味着，（当按比例放大时）应该是4879.4 px宽的div，我在css中指定了值4。它立刻失去了4位重要人物。我最终做的是将实际（100％比例）值存储在javascript变量中。这样，当我想缩放它时，它使用包含所有有效数字的完整值。我可以根据自己的需要进行扩展。如果我将4px宽的div缩小10倍，它会合理地消失，但是当我缩小比例时会立即回来。

再次，对不起，我提出这么糟糕的问题。但我希望这个答案可以帮助其他人对此感到疑惑。

如何防止值四舍五入到javascript

7 个答案: