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

变化：

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

致：

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

<强> FIDDLE

Answer 2

两个问题：

您无法分配到css()功能
您传递的值应包含单位（在这种情况下可能为像素）

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

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

在＆＃39; px＆＃39;中提供价值或者＆＃39; em＆＃39;。使用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}) 

    });
 });

DEMO：http://jsfiddle.net/vuLPq/29/

你可以使用模糊aswel。当您输入值

时，按键将更新位置

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

6 个答案: