我有两个按钮,一个使得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>
Run Code Online (Sandbox Code Playgroud)
CSS
div {
width: 50px;
height: 50px;
background: cornflowerblue;
}
Run Code Online (Sandbox Code Playgroud)
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
});
}
});
Run Code Online (Sandbox Code Playgroud)
鉴于0
评估为'falsey'(或false-ish),您可以使用||
运算符传递或返回1
的事件:width()
height()
0
var element = $('div');
element.animate({
'width' : (element.width() || 1) * 10,
'height' : (element.height() || 1) * 10
});
Run Code Online (Sandbox Code Playgroud)
归档时间: |
|
查看次数: |
115 次 |
最近记录: |