Fatal编程技术网
  • javascript/
  • 难以捉摸的文本练习（jquery/Javascript）

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

javascript jquery html css

难以捉摸的文本练习（jquery/Javascript）,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我正在学习jquery/javascript，我完全按照书中所说的那样做了练习。但是，跨度框并没有像预期的那样在悬停状态下移动 如果有人能帮我找出我做错了什么，我将不胜感激！多谢各位 JSIDLE链接： 以下是HTML： <body> <span id="elusiveText" onmouseover="moveIt()">Click Me</span> </body> Javascript: function moveIt(){ va

我正在学习jquery/javascript，我完全按照书中所说的那样做了练习。但是，跨度框并没有像预期的那样在悬停状态下移动

如果有人能帮我找出我做错了什么，我将不胜感激！多谢各位

JSIDLE链接：

以下是HTML：

<body>
    <span id="elusiveText" onmouseover="moveIt()">Click Me</span>
</body>
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库

再次感谢

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

这里使用
animate（）
方法，如果有问题…

两个问题：

  • 用于查找和更新文本元素的jQuery代码的选择器不正确。这条线应该是这样的：

    $("#elusiveText").css({"top": y + "px", "left": x + "px"});
  • 在JSFIDLE中，需要将JavaScript包装器模式设置为“No wrap（In body）”

    • 你的选择器错了

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

    $("#elusiveText").css({"top": y + "px", "left": x + "px"});
    非常感谢您的回答和JSFIDLE技巧。有趣的是，我喜欢
    animate（）
    备选方案。非常感谢。 
    $("#elusiveText").css({"top": y + "px", "left": x + "px"});

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