Question

正如标题所说，我正在寻找一种在鼠标移动时移动按钮的有效方法（仅适用于我正在进行的一个小项目）。我决定使用jQuery，但我遇到了以下代码的问题。因为它在语法上是正确的（我相信），没有抛出错误，但按钮没有按预期移动。非常感谢任何帮助，谢谢。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script src = "jquery.js"></script>
    <title>Click The Button!</title>
</head>

<body>
    <input type="button" value="Try and Click Me!">
<script>
$("input").mouseenter(function(){
    $(this).style.position = "absolute";
    $(this).style.left = Math.floor(Math.random()*600)+"px";
    $(this).style.top = Math.floor(Math.random()*400)+"px";
});
</script>
</body>

</html>

强制编辑以感谢所有回复正确回复的人！非常感谢。

Answer 1

在处理jQuery对象（例如$(this)）时，使用css函数调整CSS属性。访问本机DOM元素的属性时使用element.style.left等，而不是使用jQuery选择的元素。

$("input").mouseenter(function(){
    $(this).css("position","absolute");
    $(this).css("left", Math.floor(Math.random()*600)+"px");
    $(this).css("top",Math.floor(Math.random()*400)+"px");
});

JS小提琴： http://jsfiddle.net/5LWAk/

Answer 2

试一试：

$("input").mouseenter(function () {
    $(this).css({
        "position":"absolute",
        "left": Math.floor(Math.random() * 600) + "px",
        "top": Math.floor(Math.random() * 400) + "px"
    });
});

这是fiddle

Answer 3

  $("input").mouseenter(function(){
            $(this).css({left:Math.floor(Math.random()*600)
            ,top:Math.floor(Math.random()*600)
            ,position:"absolute"});

  });

Check on Fiddle

Answer 4

更改输入以添加ID：

<input id="mybutton" type="button" value="Try and Click Me!">

然后您可以访问按钮

<script>
$("#mybutton").mouseenter(function(){
$(this).css({
    position: "absolute", 
    left: Math.floor(Math.random()*600)+"px", 
    top: Math.floor(Math.random()*400)+"px"
});
});
</script>

如何使用jQuery移动<input />元素？

4 个答案: