JQuery - 更改元素在模糊上的位置

Question

我试图让用户在输入框中输入一个数字，一旦他们取消文本框的焦点，更新元素的位置到文本框中输入的任何数字。

CSS:

<style>
#area
{
    width:300px;
    height:300px;
    border: 1px solid black;
}
#item
{
    position:absolute;
    left:20px;
    top:40px;
    height:40px;
    width:40px;
    background-color:red;
}
</style>

jQuery:

$( document ).ready(function() {
    $("#textbox").blur(function() {
        var x = document.getElementById('textbox').value;
        $("#item").css("left") = x;    
    });
});

HTML:

<div id="area"> 
    <div id="item"></div>
</div><br />
<input type="text" id="textbox"></input>

小提琴:http://jsfiddle.net/vuLPq/14/

这一行$("#item").css("left") = x;似乎不起作用。div的位置不更新。有人看到问题了吗?

Answer 1

两个问题:

1. 不能指定css()函数
2. 你传递的值应该包含单位(可能是像素，在这种情况下)

 $("#textbox").blur(function() {
     var x = $(this).val() + "px";
     $("#item").css("left", x);    
 });

Answer 2

变化:

$("#item").css("left") = x;

:

$("#item").css("left", x + "px");  

小提琴

Answer 3

您可能会发现一些有用的东西。首先，在模糊事件中，你已经可以访问对象，所以你不需要做document.getElementByID，你可以简单地做this.value。

第二，要改变css属性，你不能把它设置为相等所以你必须改变

$("#item").css("left") = x;

$("#item").css("left", x + "px");  

更新小提琴:http://jsfiddle.net/vuLPq/17/

Answer 4

检查Demo Fiddle

提供'px'或'em'的值。使用this.value .

$( document ).ready(function() {
    $("#textbox").blur(function() {
        $("#item").css("left",this.value+'em');   
    });
});

Answer 5

Try this:
    http://jsfiddle.net/appleBud/vuLPq/25/
You are just missing px with your value.
Hope it helps. 

Answer 6

试试这个代码

 $( document ).ready(function() {
$("#textbox").keypress(function() {
    var x = $(this).val();       
    $("#item").animate({left:x}) 
    });
 });

演示:http://jsfiddle.net/vuLPq/29/

也可以和模糊一起使用。当您输入值