增量式CSS定位不起作用

我发誓这应该可行，但事实并非如此。我必须失去了一些东西简单：增量式CSS定位不起作用

HTML：

<div id="box"></div>

CSS：

#box { 
    position: absolute; 
    background: blue; 
    width: 200px; 
    height: 200px; 
    left: 20px; 
    top: 20px; 
}

的JavaScript：

$('#box').click(function(e) { 
    if (e.shiftKey) 
     $(this).css('left', '70px'); 
    else 
     $(this).css('left', '+=50'); 
});

如果你按住Shift并单击，该框移动正如它应该。尝试点击不换班，并且该框不会将其左边缘位置增加50px。是什么赋予了？

来源

2011-07-01 CaptSaltyJack

这是一个jQuery错误，我正在努力寻找一个链接。这里曾问过很多次。 – thirtydot

[在jQuery 1.6.1中使用箭头键移动div不起作用]（http://stackoverflow.com/questions/5983034/move-div-with-arrow-key-in-jquery-1-6- 1-does-not-work） – thirtydot

见http://bugs.jquery.com/ticket/9237

的错误将被固定在1.6.2。

破碎：http://jsfiddle.net/Kwpuq/

修正：http://jsfiddle.net/Kwpuq/1/ - 这是使用 “jQuery的（边缘）”

来源

2011-07-01 21:50:50 thirtydot

时，不要使用'px'完美，谢谢。唉，他们修正了$ .css（）而不是$ .animate（）。 – CaptSaltyJack

如果您现在需要它，请使用'parseInt（$（this）.css（'left'））+ 50 +“px”'。 – thirtydot

@CaptSaltyJack：最后你不需要'+“px”'。我的错。 – thirtydot

变化：

$(this).css('left', '+=50');

到：

$(this).css('left', '+=50px');

来源

2011-07-01 21:44:40 Michael

当然，我尝试过。 jQuery文档显示，在使用+ =或 - = – CaptSaltyJack

$('#_testList').css('left', (parseFloat($('#_testList').css('left')) + 10) + 'px');

这得到字符串的数字部分 - 在这种情况下，它得到10出10px的的 - 加10，然后附加'px'。在CSS中，您必须在值的末尾具有度量单位。

希望这会有所帮助！

来源

2011-07-01 21:55:27 mccow002

我的解决方案可能是以下几点：

$('#box').click(function(e) { 
    if (e.shiftKey) 
     $(this).css('left', '70px'); 
    else { 
     var left = parseInt($(this).css('left')); 
     left+=50; 
     $(this).css('left',left)} 
});

演示：http://jsfiddle.net/JYAqr/

$(this).css('left')返回一个字符串，所以你必须prase它作为整数，然后添加50像素

来源

2011-07-01 21:56:26 Sotiris

增量式CSS定位不起作用

回答

相关问题