Question

我正在研究一个向学生解释jQuery的项目。我有一个div会在点击时滑动，然后添加一秒来隐藏。然后没有任何工作，所以我删除了所有新代码，但幻灯片div不再有效。

<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script type="text/javascript">
        // slide function
        $("#frog").click(function() {
            $("#frog").animate({left: "200px"}, 500);
        });

    </script>
    <style type="text/css">
        #frog{
            width: 100px;
            height: 100px;
            background-color: red;
            position: relative;
            left: 20px;
        }
    </style>
    <title>I hate JS!</title>
</head>

<body>
    <ul>
        <h2>Programming Languages</h2>
        <li>Python</li>
        <li>Javascript</li>
        <li>C++</li>
        <li>C#</li>
        <li>ruby</li>
    </ul>
    <ol>
        <h2>Top 3 Best Animations</h2>
        <h4><li>Slide</li></h4>

    <div id="frog"></div>
    </ol>

</body>

Answer 1

您的HTML无效。这会破坏任何javascript，因为元素被渲染错误。它应该是这样的：

<ul>
    <h2>Programming Languages</h2>
    <li>Python</li>
    <li>Javascript</li>
    <li>C++</li>
    <li>C#</li>
    <li>ruby</li>
</ul>
<ol>
    <li><h2>Top 3 Best Animations</h2></li>
    <li>
      <h4>Slide</h4>
      <div id="frog"></div>
    </li>
</ol>
<script>//javascript here</script>

此外，强烈建议在关闭正文标记之前加入JS 。因为当javascript启动时，它必须绑定的元素必须首先存在！如果javascript在元素之前呈现，它将永远无法找到它，因此无法工作，因此请在文档的末尾包含javascripts，而不是开头。

您还需要将您的javascript包装在
中
$(function(){ //Javascript here });

因此，当页面加载完成后，它将在所有浏览器上触发。（并非所有浏览器都会自动触发javascripts）

请参阅此JS小提琴，了解一个工作示例：

https://jsfiddle.net/5cxnLe4v/1/

- 同样重要：确保关闭所有元素，例如</body>和</html>！

Div突然变得没有反应

1 个答案: