Question

我正在学习jquery / javascript，我完全按照书中的说法进行了练习。但是，跨度框不会按原样悬停移动。

如果有人能帮助我找出我做错了什么，我会非常感激！非常感谢你

JSFiddle Link：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库

再次感谢！

Answer 1

你使用了错误的选择器，不应该在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()方法，如果这很重要......

Answer 2

两个问题：

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

Answer 3

你的选择器错了，

使用＃按ID选择元素：

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

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

3 个答案: