jquery - Firebug 中的 TypeError: $(...) is null 错误，但代码可以在 jsFiddle 上运行

Question

您可以在以下位置查看我的 js(以及相关的 html 和 css):http://jsfiddle.net/twsx7/9/

我正在对 Blackboard Learn 9.1 进行调整(因此，如果有人使用过学习管理系统或调整构建 block ，他们可能已经知道我为什么会遇到此问题)。

我所做的更改包括检查应用的类(class)主题，然后根据该主题向表中添加一个类，以便该表的样式与主题相匹配。

当我在我们的服务器上运行它时，当它到达var theme_id = $(".current").attr("id"时，我收到错误$(...) is null ”)；。 JS 的其余部分有效(请注意，JS 的顶部部分通常是页面中包含的另一个文件，无法将其链接到 jsfiddle，因为它位于经过身份验证的服务器上)

我对此文件的贡献是(以及代码失败的地方):

第 242 行

$unitMap.addClass(getTheme());

第 381 - 385 行

function getTheme() {
    var theme_id = $(".current").attr("id"); // error occurs this line
    var theme = $("#"+theme_id).find("a").html();
    return theme.toUpperCase();
}

这是我第一次尝试 jQuery，因此我担心的一个问题是，我对编写代码的 jQuery 版本使用了错误的语法。

当您选择包含调整时，我在代码中找到了以下内容:

<script src='/webapps/qut-tweakbb-BBLEARN/jquery.js' type='text/javascript'></script><script src='/webapps/qut-tweakbb-BBLEARN/jquery.tweakSetup.js' type='text/javascript'></script>

jsFiddle顶部的代码来自jquery.tweakSetup.js

我希望我只是使用了错误的 jQuery 版本标记(尽管我无法找到原始代码编写的哪个版本)任何建议将不胜感激.

Answer 1

1. 确保在运行自定义脚本之前加载 jQuery
2. 您是否从 JSFiddle 复制了代码并立即使用它？ Fiddle 代码有损坏的习惯。 ; 通常被定义为无效字符。删除它并自己重新输入。

添加: 3. 正如 John Fontaine 指出的，jQuery 可能与另一个库冲突。要绕过这个问题，您可以使用 jQuery noConflict 模式。 documentation对此很清楚，但我会举一些例子，以防万一。

最好的方法如下，或者至少这是我的偏好:

使用另一个变量代替$，例如$j。通过这样做，您和代码的任何其他修订者都清楚该代码依赖于 $ 之外的另一个库。

示例:

var $j = jQuery.noConflict();

// Use jQuery via $j(...)
$j(document).ready(function () {
  var secondary = $j("#secondary-footer");
  secondary.hide().addClass("fixed").fadeIn("fast");

  $j(window).scroll(function () {
    if (secondary.offset().top >= ($j(document).height() - 350)) {
      secondary.removeClass("fixed");
    } else if (secondary + ":not('.fixed')") {
      secondary.addClass("fixed");
    }
  });
});

这个方法的“危险”是你有时可能会忘记使用这个变量。您可以做的是使用正常的美元符号开始，完成后进行查找替换。

可能是最直接的方法:

jQuery(function ($) {
  var secondary = $("#secondary-footer");
  secondary.hide().addClass("fixed").fadeIn("fast");

  $(window).scroll(function () {
    if (secondary.offset().top >= ($(document).height() - 350)) {
      secondary.removeClass("fixed");
    } else if (secondary + ":not('.fixed')") {
      secondary.addClass("fixed");
    }
  });
});

这允许您在该 block 中使用 jQuery，即以 jQuery(function ($) { 开头并以 }) 结尾的 block ；.