Question

我正在尝试创建一个网页，其中您悬停的字词会消失，并且在您离开之后再也不会出现，只有几句话。我从另一个StackOverflow人那里获得了大部分代码，但是我无法让Javascript实际上与HTML一起工作。

JS中的警报就是检查javascript是否正常工作。也许我把它包裹在Start_Time Delta End_Time 0 00:00:00 00:00:00 0 days 00:00:00 1 01:00:00 01:00:00 0 days 02:00:00 2 02:00:00 02:00:00 0 days 04:00:00 3 03:00:00 03:00:00 0 days 06:00:00 4 04:00:00 04:00:00 0 days 08:00:00 5 05:00:00 05:00:00 0 days 10:00:00 6 06:00:00 06:00:00 0 days 12:00:00 7 07:00:00 07:00:00 0 days 14:00:00 8 08:00:00 08:00:00 0 days 16:00:00 9 09:00:00 09:00:00 0 days 18:00:00 10 10:00:00 10:00:00 0 days 20:00:00 11 11:00:00 11:00:00 0 days 22:00:00 12 12:00:00 12:00:00 1 days 00:00:00 13 13:00:00 13:00:00 1 days 02:00:00 14 14:00:00 14:00:00 1 days 04:00:00 15 15:00:00 15:00:00 1 days 06:00:00 16 16:00:00 16:00:00 1 days 08:00:00 17 17:00:00 17:00:00 1 days 10:00:00 18 18:00:00 18:00:00 1 days 12:00:00 19 19:00:00 19:00:00 1 days 14:00:00错了？

如果我是一个绝对的傻瓜，我很抱歉。我不是编码员，我只是想为英语课做一个“电子文本”项目。任何帮助，将不胜感激。谢谢。这是我的代码：

HTML：

document.ready

CSS：

<!DOCTYPE html>
<head>
<link rel = "stylesheet" href = "NarrativeTheory.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type = "text/javascript" src="NarrativeTheory.js"></script>
<h1>
Narrative Theory Project
</h1>
</head>

<body>
hover around in the area below...
<br>
<br>

<p class = "hover">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra risus nec maximus rutrum. Vestibulum vulputate, elit ac euismod gravida, felis erat eleifend felis, vel blandit lorem ex sit amet est. Cras luctus bibendum dolor, vel consequat magna.
    Morbi pellentesque turpis metus. Pellentesque sit amet erat ex. Integer et nisi nisl. Quisque ornare mollis velit, id elementum elit pharetra at. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur
    cursus cursus dolor, eu laoreet mauris dapibus vitae. Nunc ac ipsum sit amet diam suscipit lobortis. Nam nec vehicula augue. Cras nec sapien vitae leo gravida vestibulum.
</p>
<p class = "hover">
    Etiam viverra bibendum aliquet. Aenean erat ligula, commodo id aliquet vel, eleifend ac orci. Aliquam blandit libero feugiat augue tincidunt, id fringilla lectus aliquam. Nulla ut nisl sit amet nulla feugiat porta. Curabitur euismod, mi vitae luctus facilisis,
    est risus ornare erat, sed efficitur justo lorem nec urna. Cras in fringilla dolor. Aliquam faucibus scelerisque nunc, et rutrum quam pharetra ac. Vestibulum velit enim, consequat id nisi in, laoreet feugiat turpis. Phasellus auctor pharetra ultrices.
    In ut condimentum lectus. Integer at dui egestas, ultrices metus pulvinar, venenatis mi. Donec vitae mauris viverra, convallis urna sit amet, posuere sapien. Sed quis magna odio. Vivamus mauris ipsum, euismod non sagittis eu, pretium et neque. Nunc
    consequat ipsum eget magna facilisis mattis. Nulla eu lorem id tortor faucibus placerat.
</p>

</body>
</html>

使用Javascript：

* {

}

.hover {
    opacity: 0.01;
}

.hovering {
    opacity: 1;
}

span {
    transition: opacity 0.5s;
    opacity: 0;
}

p {
    cursor: default;
}

Answer 1

你的实际代码有几个问题：

首先它是$(document)而不是$document。
然后在您的代码中，当您编写.split(" ");时，您尝试在新行中链接某些方法，只能在javascript中的对象或数组上调用方法，因此您需要更改像这样的代码：

$("p").each(function() {
  var txt = $(this).text()
    .split(" ")
    .map(function(x) {
      return exceptions.includes(x.toLowerCase()) ? x : "<span class='hover'>" + x + "</span>"
    }).join(" ");
  $(this).html(txt);
});

注意：

请注意，您无法调用.join()或任何其他方法（除了使用分号window后在;范围内声明的函数在上一行中，因为;表示语句已结束在下一行中，您需要调用object上的所有方法或 array。

另请注意，您可以查看浏览器控制台中出现的错误，以便调查代码并找出问题所在。

一些有用的链接：

我建议您阅读MDN - Introducing JavaScript objects和The Javascript Guide to Objects, Functions, Scope, Prototypes and Closures教程，以便进一步阅读此主题。

Answer 2

你缺少一些括号。将第一行更改为：

$(document).ready(function() {

此外，如果您要链接函数调用，则无法使用分号结束行。应从以.split和.map开始的行中删除分号。

Answer 3

您应该注意浏览器控制台，它会显示JavaScript错误。

请尝试以下操作：

$(document).ready(...

Javascript和HTML似乎无法正常工作

3 个答案: