JQuery - Modifier la position de l'élément sur le flou

Question

J'essaie de permettre à l'utilisateur de taper un nombre dans une zone de saisie et une fois qu'il n'a pas sélectionné la zone de texte, mettre à jour la position d'un élément.

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> 

Fiddle: http://jsfiddle.net/vuLPq/14/

Cette ligne $("#item").css("left") = x; ne semble pas w ork. La position de div n'est pas mise à jour. Quelqu'un peut-il voir le problème?

Answer 1

Deux problèmes:

1. Vous ne pouvez pas attribuer au css() fonctionnent
2. La valeur que vous êtes de passage doit contenir des unités (probablement pixels, dans ce cas)

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

Answer 2

Change:

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

Pour:

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

FIDDLE

Answer 3

Un couple de choses que vous pourriez trouver utiles. Tout d'abord, à l'intérieur de l'événement de flou, vous avez déjà accès à l'objet, donc vous n'avez pas besoin de faire document.getElementByID vous pouvez simplement faire this.value.

En second lieu, changer une propriété CSS, vous ne définissez pas égale si vous devez changer

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

Pour

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

Mise à jour Fiddle: http://jsfiddle.net/vuLPq/17/

Answer 4

Cocher cette Demo Fiddle

Indiquez la valeur en "px" ou "em". Utilisez 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

essayer ce code

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

    }); 
}); 

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

vous pouvez l'utiliser avec le flou aswel.keypress mettra à jour la position lorsque vous entrez la valeur