Question

我在这里找到了相关的文章，但没有一篇是有用的。我正在从codecademy学习jQuery，当我尝试自己练习时，没有任何事情发生。 HTML看起来像这样：

<!DOCTYPE html>
<html>
    <head>
       <title>Result</title>
        <link rel='stylesheet' type='text/css' href='MovieSiteStyle.css'/>
        <script type='text/javascript' src='MovieSiteBehavior.js'></script>
    </head>
    <body>
        <div></div>   
    </body>
</html>

CSS看起来像这样：

div {
   height: 100px;
   width: 100px;
   background-color: #FA6900;
   border-radius: 5px;
}

和Javascript看起来像这样：

$(document).ready(function() {
$('div').click(function() {
    $('div').fadeOut('slow');
});
});

应该会出现一个橙色矩形，当你点击它时它会消失，但事实上它只会出现而我无法让它消失。（在codecademy上的相同示例工作得很好） P.S有些人因为糟糕的问题而责备我，如果你认为这是一个糟糕的问题，请解释原因。

Answer 1

看起来你忘了添加 jQuery库 - 工作正常。建议在点击监听器中使用$(this)，以便隐藏您单击的相同div - 请参阅下面的演示 2 divs ：

$(document).ready(function() {
  $('div').click(function() {
    $(this).fadeOut('slow');
  });
});

div {
  height: 100px;
  width: 100px;
  background-color: #FA6900;
  border-radius: 5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div></div>
<br/>
<div></div>

Answer 2

将其添加到<body>标记的底部：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

像这样：

<!DOCTYPE html>
<html>
    <head>
       <title>Result</title>
        <link rel='stylesheet' type='text/css' href='MovieSiteStyle.css'/>
        <script type='text/javascript' src='MovieSiteBehavior.js'></script>
    </head>
    <body>
        <div></div> 
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
        <script> 
          $(document).ready(function() {
            $('div').click(function() {
              $('div').fadeOut('slow');
            });
          });
        </script>
    </body>
</html>

Answer 3

您没有添加jQuery库。这就是为什么它不起作用的原因。尝试添加：

<script src="https://code.jquery.com/jquery-3.1.1.js"></script>

进入<head>

无法将jQuery链接到HTML

3 个答案: