Fatal编程技术网
  • javascript/
  • Javascript和HTML don'；似乎工作不正常

Javascript和HTML don'；似乎工作不正常

javascript jquery html

Javascript和HTML don'；似乎工作不正常,javascript,jquery,html,Javascript,Jquery,Html,我正在尝试创建一个网页，在这个网页中，你悬停在上面的单词会消失，并且在你离开它们之后再也不会出现，除了一些单词。我从另一个StackOverflow人员那里获得了大部分代码，但是我在让Javascript实际与HTML一起工作时遇到了困难 JS中的警报只是用来检查javascript是否正常工作。也许我把它包装在文档中了。准备好了吗 如果我是个十足的傻瓜，我很抱歉。我不是编码员，我只是想为英语课做一个“电子文本”项目。任何帮助都将不胜感激。非常感谢。这是我的密码： HTML: <!DOCT

我正在尝试创建一个网页，在这个网页中，你悬停在上面的单词会消失，并且在你离开它们之后再也不会出现，除了一些单词。我从另一个StackOverflow人员那里获得了大部分代码，但是我在让Javascript实际与HTML一起工作时遇到了困难

JS中的警报只是用来检查javascript是否正常工作。也许我把它包装在
文档中了。准备好了吗

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

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>



* {

}

.hover {
    opacity: 0.01;
}

.hovering {
    opacity: 1;
}

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

p {
    cursor: default;
}



$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

});
});


Javascript:


<!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>



* {

}

.hover {
    opacity: 0.01;
}

.hovering {
    opacity: 1;
}

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

p {
    cursor: default;
}



$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

});
});



$document.ready（函数（）{
警惕（“救命！”）；
风险值例外情况=[“知识”、“公共部门”、“连续性”、“法雷特拉”]；
$（“p”）。每个（函数（）{//用于所有段落
var txt=$（this）.text（）//获取文本，将其拆分，必要时添加跨距，然后将其重新组合在一起
.拆分（“”）；
.map（函数（x）{返回异常。包括（x.toLowerCase（））？x:“+x+”}）；
.加入（“”）；
$（this.html（txt）；//将文本设置为新处理的文本
}).on（“鼠标悬停”，“悬停”，函数（）{
$（this）.addClass（“悬停”）；//将不透明度设置为100%
}).on（“mouseout”，“悬停”，函数（）{
$（this.attr（“类”，“不透明度”）；//将不透明度设置为0%，删除“悬停”事件
});
});

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


$(document).ready(function() {



此外，如果要链接函数调用，则不能使用分号结束行。分号应该从
.split
和
.map
开头的行中删除。您缺少一些括号。将第一行更改为：


$(document).ready(function() {



此外，如果要链接函数调用，则不能使用分号结束行。分号应该从
.split
和
.map
开头的行中删除。您应该注意浏览器控制台，它会显示JavaScript错误

请尝试以下操作：


$（document）.ready（…
您应该注意浏览器控制台，它会向您显示JavaScript错误

请尝试以下操作：


$（文档）。就绪（…
您的实际代码有几个问题：


  • 首先，它是
    $（document）
    ，而不是
    $document
    • 

  • 然后，在您的代码中，您试图将一些方法链接到新行中。例如，当您编写
    .split（“”；
    ）时，只能在javascript中的对象或数组上调用方法，因此您需要如下更改代码：
    • 

    

    $（“p”）。每个（函数（）{
var txt=$（this）.text（）
.拆分（“”）
.map（函数（x）{
返回异常。包括（x.toLowerCase（））？x:“+x+”
}).加入（“”）；
$（this.html（txt）；
});

    
注意：
    

    <!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>

    

    * {

}

.hover {
    opacity: 0.01;
}

.hovering {
    opacity: 1;
}

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

p {
    cursor: default;
}

    

    $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

});
});

    

      

    • 请注意，您不能调用
      .join（）
      或任何其他方法（除了
在使用分号后在
      窗口
      范围内声明的函数
    ； 在前一行中，因为
    ；
    意味着语句的结尾是这样的 在下一行中，您需要调用
    对象
    或 
    数组
  • 还请注意，您可以检查浏览器控制台中出现的错误，以便调查代码并找出错误所在
    • 一些有用的链接：

    <!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>

    * {

}

.hover {
    opacity: 0.01;
}

.hovering {
    opacity: 1;
}

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

p {
    cursor: default;
}

    $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

});
});
    我建议您可以阅读本教程以进一步阅读本主题。

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

  • 首先，它是
    $（document）
    ，而不是
    $document

  • 然后，在您的代码中，您试图将一些方法链接到新行中。例如，当您编写
    .split（“”；
    ）时，只能在javascript中的对象或数组上调用方法，因此您需要如下更改代码：

    • $（“p”）。每个（函数（）{
var txt=$（this）.text（）
.拆分（“”）
.map（函数（x）{
返回异常。包括（x.toLowerCase（））？x:“+x+”
}).加入（“”）；
$（this.html（txt）；
});
    注意：

    <!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>

    * {

}

.hover {
    opacity: 0.01;
}

.hovering {
    opacity: 1;
}

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

p {
    cursor: default;
}

    $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

});
});
    • 请注意，您不能调用
      .join（）
      或任何其他方法（除了 在使用分号后在
      窗口
      范围内声明的函数； 在前一行中，因为
      ；
      意味着语句的结尾是这样的 在下一行中，您需要调用
      对象
      或 
      数组
    • 还请注意，您可以检查浏览器控制台中出现的错误，以便调查代码并找出错误所在
    一些有用的链接：

    <!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>

    * {

}

.hover {
    opacity: 0.01;
}

.hovering {
    opacity: 1;
}

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

p {
    cursor: default;
}

    $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

});
});
    我建议你们可以阅读本教程，以便进一步阅读本主题