难以捉摸的文本练习（jquery/Javascript）答案

【问题标题】：Elusive text exercise (jquery/Javascript)难以捉摸的文本练习（jquery/Javascript）
【发布时间】：2015-05-30 21:39:32
【问题描述】：

我正在学习 jquery/javascript，并且完全按照书中的说明进行了练习。然而，跨度框并没有像预期的那样悬停移动。

如果有人可以帮助我找出我做错了什么，我将不胜感激！非常感谢

JSFiddle 链接：http://jsfiddle.net/036bz98a/

这是 HTML：

<body>
    <span id="elusiveText" onmouseover="moveIt()">Click Me</span>
</body>

CSS：

    span {
position: absolute;
top: 150px;
left: 100px;
background-color: #0066AA;
color: #FFFFFF;
font-weight: bold;
border: 2px solid #C0C0C0;
padding: 3px;
border-radius: 5px;
 -webkit-border-radius: 5px;
 -moz-border-radius: 5px;
}

Javascript：

function moveIt(){
var coords = new Array(10,50,100,130,175,225,260,300,320,350);
var x = coords[Math.floor((Math.random()*10))];
var y = coords[Math.floor((Math.random()*10))];
$("elusiveText").css({"top": y + "px", "left": x + "px"});
}

然后我链接到最新的jquery库

再次感谢！

【问题讨论】：

标签： javascript jquery html css

【解决方案1】：

两个问题：

您用来查找和更新文本元素的 jQuery 代码有一个不正确的选择器。该行应如下所示：
```
$("#elusiveText").css({"top": y + "px", "left": x + "px"});
```
在 jsfiddle 中，需要将 JavaScript wrapper 模式设置为“No wrap (in body)”。

【讨论】：

非常感谢您的回答和 jsfiddle 提示。

【解决方案2】：

您使用了错误的选择器，不应该在 onload 函数中包装方法（jsFiddle 上的功能）：

function moveIt() {
    var coords = new Array(10, 50, 100, 130, 175, 225, 260, 300, 320, 350);
    var x = coords[Math.floor((Math.random() * 10))];
    var y = coords[Math.floor((Math.random() * 10))];
    $("#elusiveText").css({
        "top": y + "px",
        "left": x + "px"
    })
}

这里-jsFiddle- 使用animate() 方法代替，如果这很重要...

【讨论】：

有趣，我喜欢animate() 替代方案。谢谢！

【解决方案3】：

你的选择器错了，

使用 # 来按 id 选择元素，如下所示：

$("#elusiveText").css({"top": y + "px", "left": x + "px"});

【讨论】：