'$'，'文档'，'窗口'未定义

时间：2017-03-21 21:14:22

标签： javascript jquery html

我正在尝试将对象中的一些信息附加到div  我尝试将$(function() {...})，document.addEventListener("DOMContentLoaded", function() {...})和window.onload = function() {...}用于我的JavaScript文件，但它们都没有工作，因为'$'，'文档'和'窗口'未定义，但已定义当我在浏览器中打开我的项目时（使用控制台测试）  每当我为一个新项目加注星标时，我都会从以下html开始：

<head>
  <title>...</title>
  <script src="https://code.jquery.com/jquery-3.2.1.js" integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE=" crossorigin="anonymous"></script>
  <link rel="stylesheet" href="style.css">
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>

<body>

  <script src="script.js"></script>
</body>

一切正常。我确保文件路径正确（文件在同一个文件夹中） 这是我的项目，万一我错过了一些东西：

$(function () {
  var streamers = [
    {
      "stream": {
        "mature": false,
        "status": "Greg working on Electron-Vue boilerplate w/ Akira #programming #vuejs #electron",
        "broadcaster_language": "en",
        "display_name": "FreeCodeCamp",
        "game": "Creative",
        "language": "en",
        "_id": 79776140,
        "name": "freecodecamp",
        "created_at": "2015-01-14T03:36:47Z",
        "updated_at": "2016-09-17T05:00:52Z",
        "delay": null,
        "logo": "https://static-cdn.jtvnw.net/jtv_user_pictures/freecodecamp-profile_image-d9514f2df0962329-300x300.png",
        "banner": null,
        "video_banner": "https://static-cdn.jtvnw.net/jtv_user_pictures/freecodecamp-channel_offline_image-b8e133c78cd51cb0-1920x1080.png",
        "background": null,
        "profile_banner": "https://static-cdn.jtvnw.net/jtv_user_pictures/freecodecamp-profile_banner-6f5e3445ff474aec-480.png",
        "profile_banner_background_color": null,
        "partner": false,
        "url": "https://www.twitch.tv/freecodecamp",
        "views": 161989,
        "followers": 10048,
        "_links": {
          "self": "https://api.twitch.tv/kraken/channels/freecodecamp",
          "follows": "https://api.twitch.tv/kraken/channels/freecodecamp/follows",
          "commercial": "https://api.twitch.tv/kraken/channels/freecodecamp/commercial",
          "stream_key": "https://api.twitch.tv/kraken/channels/freecodecamp/stream_key",
          "chat": "https://api.twitch.tv/kraken/chat/freecodecamp",
          "subscriptions": "https://api.twitch.tv/kraken/channels/freecodecamp/subscriptions",
          "editors": "https://api.twitch.tv/kraken/channels/freecodecamp/editors",
          "teams": "https://api.twitch.tv/kraken/channels/freecodecamp/teams",
          "videos": "https://api.twitch.tv/kraken/channels/freecodecamp/videos"
        }
      },
      "_links": {
        "self": "https://api.twitch.tv/kraken/streams/freecodecamp",
        "channel": "https://api.twitch.tv/kraken/channels/freecodecamp"
      }
  },
    {
      "stream": null,
      "display_name": "OgamingSC2",
      "_links": {
        "self": "https://api.twitch.tv/kraken/streams/ogamingsc2",
        "channel": "https://api.twitch.tv/kraken/channels/ogamingsc2"
      }
  },
    {
      "stream": {
        "mature": false,
        "status": "RERUN: StarCraft 2 - Kane vs. HuK (ZvP) - WCS Season 3 Challenger AM - Match 4",
        "broadcaster_language": "en",
        "display_name": "ESL_SC2",
        "game": "StarCraft II",
        "language": "en",
        "_id": 30220059,
        "name": "esl_sc2",
        "created_at": "2012-05-02T09:59:20Z",
        "updated_at": "2016-09-17T06:02:57Z",
        "delay": null,
        "logo": "https://static-cdn.jtvnw.net/jtv_user_pictures/esl_sc2-profile_image-d6db9488cec97125-300x300.jpeg",
        "banner": null,
        "video_banner": "https://static-cdn.jtvnw.net/jtv_user_pictures/esl_sc2-channel_offline_image-5a8657f8393c9d85-1920x1080.jpeg",
        "background": null,
        "profile_banner": "https://static-cdn.jtvnw.net/jtv_user_pictures/esl_sc2-profile_banner-f8295b33d1846e75-480.jpeg",
        "profile_banner_background_color": "#050506",
        "partner": true,
        "url": "https://www.twitch.tv/esl_sc2",
        "views": 60843789,
        "followers": 135275,
        "_links": {
          "self": "https://api.twitch.tv/kraken/channels/esl_sc2",
          "follows": "https://api.twitch.tv/kraken/channels/esl_sc2/follows",
          "commercial": "https://api.twitch.tv/kraken/channels/esl_sc2/commercial",
          "stream_key": "https://api.twitch.tv/kraken/channels/esl_sc2/stream_key",
          "chat": "https://api.twitch.tv/kraken/chat/esl_sc2",
          "subscriptions": "https://api.twitch.tv/kraken/channels/esl_sc2/subscriptions",
          "editors": "https://api.twitch.tv/kraken/channels/esl_sc2/editors",
          "teams": "https://api.twitch.tv/kraken/channels/esl_sc2/teams",
          "videos": "https://api.twitch.tv/kraken/channels/esl_sc2/videos"
        }
      },
      "_links": {
        "self": "https://api.twitch.tv/kraken/streams/esl_sc2",
        "channel": "https://api.twitch.tv/kraken/channels/esl_sc2"
      }
  },
    {
      "stream": null,
      "display_name": "noobs2ninjas",
      "_links": {
        "self": "https://api.twitch.tv/kraken/streams/esl_sc2",
        "channel": "https://api.twitch.tv/kraken/channels/esl_sc2"
      }
  },
    {
      "error": "Not Found",
      "status": 404,
      "message": "Channel 'not-a-valid-account' does not exist"
  }
  ];

  const all = $('.nav li:nth-child(1)');
  const online = $('.nav li:nth-child(2)');
  const offline = $('.nav li:nth-child(3)');
  const cont = $('#body');
  const rows = '<div class="row">' + '<div class="col-md-4"></div> <div class="col-md-8"></div>' + '</div>';
  var statusAll;
  var statusOnline;
  var statusOffline;

  all.on('click', function () {
    cont.html('');

    statusAll = streamers.filter(function (val) {
      return val;
    });
    /*statusOnline = streamers.filter(function(val) {
      return val.stream !== null && val.error !== "Not Found";
    });
    statusOffline = streamers.filter(function(val) {
      return val.stream === null || val.error === "Not Found";
    });*/

    for (var i = 0; i < statusAll.length; i++) {
      cont.append(rows);
      $('.row:nth-last-child(1) .col-md-4').append('<img class="img-responsive img-circle" src="' + statusAll[i].stream.logo + '">');
      $('.row:nth-last-child(1) .col-md-8').append('<p>' + statusAll[i].stream.display_name + '</p>');
    }
  });
});
#channels-cont {
  width: 360px;
  height: 500px;
  margin: 100px auto;
  background: white;
  box-shadow: 2px 2px 0px black;
}

ul {
  width: 100%;
}

li {
  margin: 0 auto;
  width: 33.3334%;
  text-align: center;
  font-size: 19px;
  background: red;
}
<!DOCTYPE html>
<html>

<head>
  <meta charset='UTF-8'>
  <title>My TwitchTV</title>
  <script src="https://code.jquery.com/jquery-3.2.1.js" integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE=" crossorigin="anonymous"></script>
  <link rel="stylesheet" href="style.css">
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  <link href="https://maxcdn.bootstrapcdn.com/bootswatch/3.3.7/slate/bootstrap.min.css" rel="stylesheet" integrity="sha384-RpX8okQqCyUNG7PlOYNybyJXYTtGQH+7rIKiVvg1DLg6jahLEk47VvpUyS+E2/uJ" crossorigin="anonymous">
</head>

<body>
  <div class="container-fluid">
    <div id='channels-cont'>
      <div id="header">
        <ul class="nav navbar-nav">
          <li><a href="#">All</a></li>
          <li><a href="#">Online</a></li>
          <li><a href="#">Offline</a></li>
        </ul>
      </div>
      <div id="body"></div>
    </div>
  </div>

  <script src="script.js"></script>
</body>

</html>

1 个答案:

答案 0 :(得分：1)

我认为你想要使用lengTH而不是lenght：）

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
相关问题
最新问题