0
我试图创建一个网页，其中您悬停的单词消失，并且在您离开它们之后再也不会出现，只有几个词的例外。我从另一个StackOverflow人员那里获得了大部分代码，但是我无法让Javascript实际上使用HTML工作。Javascript和HTML似乎不能正常工作
JS中的警报就在那里检查JavaScript是否正常工作。也许我把它包装在document.ready不正确？
对不起，如果我是一个绝对的傻瓜。我不是编码员，我只是想为英语课做一个“电子文本”项目。任何帮助，将不胜感激。谢谢。这里是我的代码：
HTML：
<!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>
CSS：
* {
}
.hover {
opacity: 0.01;
}
.hovering {
opacity: 1;
}
span {
transition: opacity 0.5s;
opacity: 0;
}
p {
cursor: default;
}
的Javascript：
$document.ready(function() {
alert("Help!");
var exceptions = ["lorem", "ipsum", "consectetur", "pharetra"];
$("p").each(function() { //for all paragraphs
var txt = $(this).text() //get text, split it up, add spans where necessary, put it back together
.split(" ");
.map(function(x) { return exceptions.includes(x.toLowerCase()) ? x : "<span class='hover'>" + x + "</span>"});
.join(" ");
$(this).html(txt); //set the text to our newly manipulated text
}).on("mouseover", ".hover", function() {
$(this).addClass("hovering"); //set opacity to 100%
}).on("mouseout", ".hovering", function() {
$(this).attr("class", ""); //set opacity to 0%, remove "hover" events
});
});