インクリメンタルCSSの配置が機能しない

Question

これはうまくいくはずですが、そうではありません。あなたはShift +クリックした場合、

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

---

ボックスの移動：

HTML：：

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

CSS：

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

JavaScriptの私は、単純な何かが欠けする必要がありますそれはすべきだ。シフトなしでクリックすると、ボックスの左端の位置が50ピクセル増加しません。何がありますか？

Answer 1

はバグが1.6.2で修正される予定http://bugs.jquery.com/ticket/9237

参照してください。 http://jsfiddle.net/Kwpuq/固定

を：：壊れた

http://jsfiddle.net/Kwpuq/1/ - それは "jQueryの（エッジ）"

Answer 2

変更：

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

へ：

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

Answer 3

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

を使用していますこれは、文字列の数字の一部を取得する - この場合には10pxののうち10を取得します - 10を加え、次に 'px'を追加します。 cssでは、値の最後に測定単位を設定する必要があります。

希望すると便利です。

Answer 4

Iソリューションは、次のことを次のようになります。

$('#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して、それはjQueryのバグだは50px