2

我有两个按钮，一个使 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
        });
    }
});
4

7 回答 7

6

鉴于0评估为 'falsey'（或 false-ish），您可以使用||运算符传入or返回1的事件：width()height()0

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

JS 小提琴演示。

于 2013-10-09T21:34:16.647 回答
2

在我看来，问题不在于 div 变为零，而是让它们再次远离它。

这很容易做到：

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

这是如何工作的：如果element.width()返回0，当然0 * 10也是0。0是一个错误的值，所以||使用1。

或者，如果您愿意：

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

...这只是更快地启动。:-)

更多：JavaScript 非常强大的 OR 运算符 ( ||)

于 2013-10-09T21:34:07.843 回答
1

在缩小 div 时，您只需要检查宽度是否低于 1。如果您想要保持比率，也可以添加高度限制。

我在这里添加另一个解决方案。

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

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

于 2013-10-09T21:47:55.020 回答
0

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

var element = $('div');
element.animate({
    'width' : Math.max(element.width() * 10), 50),
    'height' : Math.max(element.width() * 10), 50)
});
于 2013-10-09T21:43:19.100 回答
0

只需检查它是否仍在合理的边界内，可能是这样的：

'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 像素。

于 2013-10-09T21:53:45.377 回答
0

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;
于 2013-10-09T21:59:09.547 回答
0

好吧，事实证明，我将回答我自己的问题。我感谢我收到的所有帮助。我确定我没有从你们那里找到答案的原因是因为我没有正确表达问题并且我没有提供足够的细节。无论如何，这是我的问题的解决方案：

我最初在 css 中将所有 div 缩小了 1000 倍。这意味着，（放大时）应该是 4879.4 px 宽的 div，我在 css 中分配了 4 的值。它立即失去了 4 个有效数字。我最终做的是将真实的（100% 缩放）值存储在 javascript 变量中。这样，当我想缩放它时，它会使用所有有效数字的完整值。我可以随心所欲地向下和向上扩展。如果我将 4px 宽的 div 缩小 10 倍，它就会消失，但当我放大时又会回来。

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

于 2013-10-10T05:14:26.783 回答