我的jQuery在JSFiddle中工作，但不能在我的网站上工作！我做错了什么

My jQuery works in JSFiddle, but not on my website! What am I doing wrong?

本文关键字：我的 工作 什么 错了 但不能 jQuery JSFiddle 网站      更新时间：2023-09-26

救命！ 我正在尝试处理一个项目，其中内容缩小到 0，更改，然后再次滑动打开到新内容的合适大小。 我在 JSFiddle 上一切正常，但它在我的网站上不起作用！！ 我在这两个地方使用完全相同的jQuery，CSS和HTML。我记得在我的网站上调用当前版本的jQuery（jquery-2.2.1.min.js）。

这是JSFiddle上的工作副本：

https://jsfiddle.net/sy7e7hge

这是我网站上的非工作副本：

http://goo.gl/3iVn2E

鼠标悬停更改在两者上都很好用，但是单击更改大小在我的网站上没有任何作用！

这是堆栈溢出代码段（也有效）！

function change() {
  $("#inner").animate({height: "hide"});
  $('.content').delay(399).fadeOut(0);
  $("#inner").animate({height: "show"}, 1000);
};
$("#menu_home").click(function() {
  change();
  $('#home').fadeIn(0);
});
$("#menu_page01").click(function() {
  change();
  $('#page01').fadeIn(0);
});
$("#menu_page02").click(function() {
  change();
  $('#page02').fadeIn(0);
});
.content {
  position: relative;
  top: 0;
  left: 0;
}
#container {
  width: 500px;
  margin: 0 auto;
}
#outer {
  background: green;
  width: 500px;
  margin: 0 auto;
  padding: 30px 0 30px 15px;
}
#inner {
  background: orange;
  width: 500px;
  height: 0 auto;
  margin: 0 auto;
}
<script src="https://code.jquery.com/jquery-2.2.1.min.js"></script>
<div id="container">
    <div id="outer">
        <div id="inner">
      <div class="content" id="home">HOME<br>HOME<br>HOME</div>
      <div class="content" id="page01" style="display: none;">PAGE 1<br>PAGE 1<br>PAGE 1<br>PAGE 1<br>PAGE 1<br>PAGE 1<br>PAGE 1<br>PAGE 1</div>
      <div class="content" id="page02" style="display: none;">PAGE 2<br>PAGE 2<br>PAGE 2<br>PAGE 2<br>PAGE 2<br>PAGE 2</div>
      
        </div>
    </div>
</div>
<br><br>
<div class="menu" id="menu_home" onmouseover="this.bgColor='black'; this.style.color='red'" onmouseout="this.bgColor='white'; this.style.color='black'">click to show home page</div>
<br><br>
<div class="menu" id="menu_page01" onmouseover="this.bgColor='black'; this.style.color='red'" onmouseout="this.bgColor='white'; this.style.color='black'">click to show page 1</div>
<br><br>
<div class="menu" id="menu_page02" onmouseover="this.bgColor='black'; this.style.color='red'" onmouseout="this.bgColor='white'; this.style.color='black'">click to show page 2</div>

我做错了什么？！ 我需要做什么才能让它在我的网站上工作？

您需要将

网站的jQuery代码放在document.ready处理程序中。 jsFiddle会自动执行此操作，因此它已经可以工作了。试试这个：

function change() {
    $("#inner").animate({ height: "hide" });
    $('.content').delay(399).fadeOut(0);
    $("#inner").animate({ height: "show" }, 1000);
};
$(function() {
    $("#menu_home").click(function() {
        change();
        $('#home').fadeIn(0);
    });
    $("#menu_page01").click(function() {
        change();
        $('#page01').fadeIn(0);
    });
    $("#menu_page02").click(function() {
        change();
        $('#page02').fadeIn(0);
    });
});

移动代码的这一行：

<script type="text/javascript" src="resources/js.js"></script>

在结束</body>标记之前：

<script type="text/javascript" src="resources/js.js"></script>
</body>

你会没事的。

就像你一样，文档尚未构建，并且像inner这样的元素还不存在，因此 JavaScript 代码不会将事件附加到它们。

笔记

另一个script标签（jQuery）不需要文档中的任何特定元素来执行。因此，对于该script标签，将其保留在head标签中是完全有意义的。

其他人建议将代码包装在$(document).ready(function(){ .. })或$(function() { .. })中。这也行得通。它使您的代码在略有不同的时间执行。如果以所有三种方式实现代码，则执行顺序为：

  1. 遵循我的建议的代码
  2. $(function() { .. })中的代码
  3. $(document).ready(function(){ .. })中的代码

在某些情况下 （1） - 或者在极少数情况下甚至 （2） - 对于代码按预期执行可能太早，但在您的情况下，方法 （1） 很好：您可以在创建元素后立即附加事件处理程序。

例如，（1）可能为时过早，当您想要获取元素的位置，重新定位或调整其大小，将焦点设置在另一个元素上时，...等。

查看了您的网站的源代码后，我发现您忘记在 html 中提及下面的代码。请在document.ready块中添加以下代码，如下所示

$(document).ready(function(){
 function change() {
    $("#inner").animate({height: "hide"});
    $('.content').delay(399).fadeOut(0);
    $("#inner").animate({height: "show"}, 1000);
  };
  $("#menu_home").click(function() {
    change();
    $('#home').fadeIn(0);
  });
  $("#menu_page01").click(function() {
    change();
     $('#page01').fadeIn(0);
  });
  $("#menu_page02").click(function() {
    change();
    $('#page02').fadeIn(0);
  });
});
相关文章：