Question

文档就绪功能不适用于我，但仅在前一天有效。另外，该文件中没有其他jQuery函数可运行，但几天前就完成了。有人可以帮忙吗？

代码如下：

$(document).ready(function() {
  //does not log ready
  console.log('ready');
  //animation for slides
  $("#slideshow > div:gt(0)").hide();
  //this does work
  setInterval(function() {

    $('#slideshow > div:first')
      .fadeOut(1000)
      .next()
      .fadeIn(1000)
      .end()
      .appendTo('#slideshow');
  }, 4000);
  //end of animation
  $('nav ul div').hover(function() {
    $('.aMain').addClass('expand');
  }, function() {
    $('.aMain').removeClass('expand');
  });

  $('#a').hover(function() {
    $('.aMain').addClass('expand');

  }, function() {
    $('.aMain').removeClass('expand');
  });
  //this doesnt log click inside the function
  $('.subA', '.aNav').click(function() {
    console.log('click');
    console.log($(this).get(0).id);
    //sessionStorage.setItem("catagory", $(this).get(0).id); -> commented to not throw error on SO

  });
  //$('#thead').text(sessionStorage.getItem("catagory")); -> commented to not throw error on SO
});

<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <title>Alpert Cooks - Cook and Share</title>
  <link href="style.css" rel="stylesheet" type="text/css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <script type="text/javascript" src="js/scripts.js"></script>
</head>


<body>
  <header>
    <a href="index.html"><img src="images/Logo.png" id="logo" alt="" href="AlpertCooks/index.html" /></a>


    <nav id="nav">

      <ul>

        <li><a class="anav" href="recipeList.php">מנות ראשונות</a></li>
        <li><a id="a" class="anav">מנות עיקריות</a></li>


        <li><a id="vegeterian" class="anav" href="recipeList.php">צמחוני</a></li>
        <li><a id="salads" class="anav" href="recipeList.php">סלטים</a></li>
        <li><a id="deserts" class="anav" href="recipeList.php">קינוחים</a></li>
        <li><a id="speciala" href="recipeUpload.php">העלו מתכון שלכם</a></li>
        <div class="aMain">

          <li><a id="meat" href="recipeList.php" class="subA">בשר</a></li>
          <li><a id="bread" href="recipeList.php" class="subA">פחמימות</a></li>
          <li><a id="fish" href="recipeList.php" class="subA">דגים</a></li>
          <li><a id="milk" href="recipeList.php" class="subA">דברי חלב</a></li>
          <li><a class="subA">אחר</a></li>
        </div>
      </ul>


    </nav>

  </header>
  <main id="main">


    <div id="slideshow">
      <div>
        <div class="title">
          <h2 class="h2">פסטה</h2>

          <img id="line" src="images/decorative-clipart-fancy-3.png" alt="" /></div>
        <img id="slides" src="images/d87c1237-c3e2-401a-b26b-9afc323e503f.jpg" alt="" />
      </div>
      <div>
        <div class="title">
          <h2 class="h2">פירה</h2>

          <img id="line" src="images/decorative-clipart-fancy-3.png" alt="" /></div>
        <img id="slides" src="images/ab7c95c8-781c-4d09-93f2-d484a95cde2d.jpg" alt="" />
      </div>
    </div>

  </main>

  <footer>


  </footer>
</body>

</html>

我在代码内添加了注释，因此您可以查看哪些功能有效，哪些功能无效。所有悬停功能都在起作用。

Answer 1

由于JS代码段正常运行，并且假设没有网络问题，因此也假定Google CDN的jQuery脚本交付正常。

该问题可以精确定位到将JS文件导入到HTML文件的部分，即：

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

您将要检查浏览器的devtools / inspector的“网络”选项卡，以查看是否由于获取此脚本而收到404响应/错误。如果是这样，则问题已得到正确识别，原因是该JavaScript文件在位置js/scripts.js上不可用。验证javascript文件的位置/地址，以确保将脚本正确导入到HTML文件中。

jQuery document.ready函数不起作用

1 个答案: