JQuery - 更改元素在模糊时的位置答案

【问题标题】：JQuery - Change element's position on blurJQuery - 更改元素在模糊时的位置
【发布时间】：2014-06-12 22:54:08
【问题描述】：

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

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 的位置不会更新。任何人都可以看到这个问题吗？

【问题讨论】：

试试这个 $("#item").css("left",x+"px");而不是 $("#item").css("left") = x;
api.jquery.com/css/#css2

标签： jquery css position css-position blur

【解决方案1】：

两个问题：

您不能分配给css() 函数
您传递的值应包含单位（在本例中可能是像素）

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

【讨论】：

【解决方案2】：

变化：

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

收件人：

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

FIDDLE

【讨论】：

【解决方案3】：

您可能会发现一些有用的东西。首先，在 blur 事件中，您已经可以访问该对象，因此您无需执行 document.getElementByID，您只需执行 this.value。

其次，要改变一个css属性，你没有设置它相等，所以你必须改变

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

到

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

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

【讨论】：

【解决方案4】：

检查这个Demo Fiddle

以“px”或“em”提供值。使用this.value。

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

【讨论】：

【解决方案5】：

Try this:

    http://jsfiddle.net/appleBud/vuLPq/25/

You are just missing px with your value.
Hope it helps.

【讨论】：

【解决方案6】：

试试这个代码

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

    });
 });

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

您可以将它与模糊 aswel 一起使用。 keypress 将在您输入值时更新位置

【讨论】：