我刚开始编程，这是我第一次使用 JQuery。 我正在处理一个 HTML/CSS 元素，我想使用 Waypoint jquery 添加一些效果。问题是它不起作用。即使是基本测试(更改元素“sec1-text”的背景颜色)也不起作用。
你能帮我找出问题所在吗？ 在下面，您会找到 HTML 和 JS 文件。
HTML-------------------------------------------- --------------
<!DOCTYPE html>
<html lang="pt">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, inicial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Thais Fachini</title>
<link href="./css/normalize.css" rel="stylesheet">
<link href="./css/reset.css" rel="stylesheet">
<link href="./css/style.css" rel="stylesheet">
<link href="./css/grid.css" rel="stylesheet">
<link href="./css/responsive.css" rel="stylesheet">
<link href='http://fonts.googleapis.com/css?family=Lato:100,300,400,300italic' rel='stylesheet' type='text/css'>
<link href="https://fonts.googleapis.com/css?family=Cagliostro&display=swap" rel="stylesheet">
<link href="https://unpkg.com/ionicons@4.5.10-0/dist/css/ionicons.min.css" rel="stylesheet">
</head>
<body class="app">
<!---------------SECTION 1 --------------------------->
<div class="sec1">
<div class="header">
<div class="logo-img"><img src="img/logo_small.png" alt="Logo Thais Fachini" class="logo-img"></div>
<!--Sticky Navigation--><div class="logo-img-sticky"><img src="img/logo_small.png" alt="Logo Thais Fachini" class="logo-img-sticky"></div>
<div class="logo-name"><h1>THAÍS FACHINI</h1><p>Nutrition for Life</p></div>
<!--Sticky Navigation--><div class="logo-name-sticky"><h1>THAÍS FACHINI</h1><p>Nutrition for Life</p></div>
<div class="links">
<nav>
<a href="#" class="header-link">Sobre</a>
<a href="#" class="header-link">Como funciona</a>
<a href="#" class="header-link">Assinar</a>
<a href="#" class="header-link">Cliente</a>
</nav>
</div>
</div>
<div class="sec1-text">
<div class="text">
<p class="sec1-text-title">ALIMENTAÇÃO FUNCIONAL</p>
<p class="sec1-textindent1">para o <span class="strong">equilíbrio</span> do corpo</p>
<p class="sec1-textindent2">e o <span class="strong">prazer</span> de comer bem.</p>
</div>
<div class="buttons">
<nav>
<a href="#" class="btn btn-full">Assinar</a>
<a href="#" class="btn btn-ghost">Cliente</a>
</nav>
</div>
</div>
</div>
<!--------------- ABOUT --------------------------->
<div class="about js--about">
<div class="about-title">
<h2><span class="about-title1">Orientação Nutricional Online</span>
<span class="about-title2">Atendimento Online</span></h2>
</div>
<div class="about-photo-text">
<img src="img/photo_thais.png" alt="Photo Thais Fachini" class="about-photo">
<p>Olá!</p>
<p>Sou Thaís Fachini, nutricionista formada pela Universidade São Camilo, SP e extensões em <span class="strong">Nutrição Funcional</span> e <span class="strong">Nutrição Holística</span>.</p>
<p>Minha filosofia de atendimento lhe ensina a olhar e escutar mais seu corpo e perceber o que funciona para você.</p>
<p>Existem vários fatores em nossa vida que interferem na saúde, nos relacionamentos pessoais, trabalho, espiritualidade e aceitação pessoal. Conduzirei seu processo, indicando ferramentas para sentir-se mais feliz e mais saudável.</p>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/d3js/5.12.0/d3.min.js"></script>
<script src="js/jquery.waypoints.min.js"></script>
<script src="js/script.js"></script>
</body>
</html>
JS文件-------------------------------------------- ------------------
/*eslint-env jquery*/
(document).ready(function ( ) {
$('sec1-text').click(function(){
$(this).css('background-color', '#ff0000');
});
/* For the sticky navigation */
$('.js--about').waypoint(function(direction) {
if (direction == "down") {
$('header').addClass('sticky');
} else {
$('header').removeClass('sticky');
}
}, {
offset: '60px;'
});
});
最佳答案
您需要引用/加载 jQuery 模块，您目前只加载航路点 jQuery 模块/资源:
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
关于javascript - Waypoint JQuery 甚至基本的 jquery 代码都不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58941028/