jQuery 无法正确渲染答案

【问题标题】：jQuery not rendering properlyjQuery 无法正确渲染
【发布时间】：2011-08-10 03:47:45
【问题描述】：

我正在使用这个 jQuery 来呈现一个文本框 onClick。但是，它不是渲染......另外，我使用的是 Drupal 7。我在 html.php 的 Head 标签中有 jQuery。

 <script type="text/javascript">

  $(document).ready(function() {

    $("#front-background").hide();

        $(window).load(function() {

            $('#links-top-1').hover(function() {

                $('#front-background').fadeIn(2000);

            });

        });

  });

  </script>

【问题讨论】：

(1) 我在那里看不到任何点击处理程序。 (2) 你为什么要把$(window).load() 放在$(document).ready() 里面？ (3) 一些 HTML 与该 JavaScript 一起使用怎么样？
Difference between $(document).ready and $(window).load in jQuery

标签： javascript jquery drupal-7

【解决方案1】：

这也可能是因为 Drupal 如何处理与其他 JavaScript 库的兼容性。

您可以将 jQuery 函数包装在：

(function ($) {
    //your existing code
})(jQuery);

或者，如果您喜欢使用 template.php 文件进行主题化，您可以通过函数 drupal_add_js() 添加 JS。

更多详情请见http://drupal.org/node/171213。

【讨论】：

我对此有几个问题。 1) jQuery 是否内置在 Drupal 7 中？我正在使用 API，但它没有呈现。 2) 我将此代码添加到 html.php。但是，它用于页面--front.tpl.php。所有模板建议的 html.php 是全局的吗？我不确定您是否需要为所有新模板建议重新定义 html.php 模板。我最近切换到 D7，所以我不确定如何重新定义 html.php。谢谢。
1) 是的。您可能还必须将您的 JS 添加到 Drupal.behaviors 对象 - 请参阅drupal.org/node/171213。 2) 是的，html.tpl.php 是全局模板——添加首页特定逻辑的最简单方法是通过在template.php 中覆盖yourtheme_preprocess_page。
在 1 的基础上，只需通过 $(document).ready 添加 jQuery 函数就可以在 Drupal 6 中使用，但现在 7 使您至少将 jQuery 包装在上面的容器中。
您也可以通过 scripts[] = js/myscript.js 行（或任何您的文件名）在您的主题的 info 文件中包含一个 JS 文件（只要您包装函数，它就会工作，您不必使用模板文件。
问题可能出在 Drupal 上，因为您的 JS 确实有效：jsfiddle.net/FN4Cr/1

【解决方案2】：

如果您已经在使用$(document).ready 方法，则不需要window load 事件。试试这个。

$(document).ready(function() {

    $("#front-background").hide();

    $('#links-top-1').hover(function() {
       $('#front-background').fadeIn(2000);
    });

});

【讨论】：

【解决方案3】：

我在那里没有看到任何 onClick 功能。这应该有效：

CSS：

#front-background {
    display:none;
}

JQuery 悬停替换。悬停时淡入，离开时淡出

$(function() {
   $('#links-top-1').hover(function() {
      $('#front-background').fadeIn(2000);
   },function(){
      $('#front-background').fadeOut(2000)
   });
});

【讨论】：