Question

不完全确定如何正确描述，但我感觉我的两个（自定义）JS文件是冲突的。当我同时启用它们时，只有其中一个可以工作。如果我单独启用它们，它们就能完美运行。

这些是文件（包装在Drupal JS中）

第一个确保我的导航栏（屏幕左侧的垂直导航栏）可以在小于导航栏的屏幕上滚动，但如果页面长于导航栏，它将固定。

    /**
 * @file
 * A JavaScript file for the theme.
 *
 * In order for this JavaScript to be loaded on pages, see the instructions in
 * the README.txt next to this file.
 */

// JavaScript should be made compatible with libraries other than jQuery by
// wrapping it with an "anonymous closure". See:
// - https://drupal.org/node/1446420
// - http://www.adequatelygood.com/2010/3/JavaScript-Module-Pattern-In-Depth
(function ($, Drupal, window, document, undefined) {


// To understand behaviors, see https://drupal.org/node/756722#behaviors
Drupal.behaviors.my_custom_behavior = {
  attach: function(context, settings) {

  $( document ).ready(function() {
    $(window).scroll(function(){
      var navHeight = $('#left-bar').height() + 60;
      var windowHeight = jQuery( window ).height();
      var currentPosition = $('body').scrollTop();
      console.log(currentPosition + ' ' + (navHeight - windowHeight));
      if (currentPosition > (navHeight - windowHeight) - 1) {
        $('#left-bar').css({'position': 'fixed', 'top': (windowHeight - navHeight)});
      } else {
        $('#left-bar').css({'position': 'relative', 'top': 0});
      }
    });

  });


  }
};


})(jQuery, Drupal, this, this.document);

第二个让某个div出现并在我页面的随机位置淡出。

/**
 * @file
 * A JavaScript file for the theme.
 *
 * In order for this JavaScript to be loaded on pages, see the instructions in
 * the README.txt next to this file.
 */

// JavaScript should be made compatible with libraries other than jQuery by
// wrapping it with an "anonymous closure". See:
// - https://drupal.org/node/1446420
// - http://www.adequatelygood.com/2010/3/JavaScript-Module-Pattern-In-Depth
(function ($, Drupal, window, document, undefined) {


// To understand behaviors, see https://drupal.org/node/756722#behaviors
Drupal.behaviors.my_custom_behavior = {
  attach: function(context, settings) {

  $( document ).ready(function() { 
    showRandomQuote();
    setInterval(swapQuotes, 5500);
  });

  function showRandomQuote() {
    var numItems = $('.running-quote').length;
    var randomNumber = randomNumberFromRange(0, numItems-1);
    var quoteToDisplay = $( ".running-quote:eq(" + randomNumber + ")" );
    quoteToDisplay.addClass('displayed-quote');
    randomPlacement(quoteToDisplay);
    quoteToDisplay.fadeIn(800);
  }

  function swapQuotes() {
    var quoteToHide = $('.displayed-quote');
    quoteToHide.removeClass('displayed-quote');
    quoteToHide.fadeOut(800, showRandomQuote);
  }

  function randomPlacement(element) {
    var parent = element.parent().parent().parent();
    var parentWidth = parent.width();
    var parentHeight = parent.height();
    var randomWidth = randomNumberFromRange(200, 500);
    var randomXPos = randomNumberFromRange(0, parentWidth - randomWidth - 80);
    var randomYPos = randomNumberFromRange(0, parentHeight - element.height() - 60);
    element.width(randomWidth);
    element.css({"top": randomYPos, "left": randomXPos});
  }

  function randomNumberFromRange(min,max) {
    var randomNumber = Math.floor(Math.random()*(max-min+1)+min);
    return randomNumber;
  }

  }
};


})(jQuery, Drupal, this, this.document);

我完全不知道是什么原因造成其中一人打破另一人。有线索吗？

Answer 1

正如@Pointy所述，您的行为必须具有唯一的名称。

一般代码审核：

您对$( document ).ready(function() {的使用 documentation，附上每次刷新一个元素时都会调用函数行为通过页面加载或ajax），所以你不需要使用jQuery.ready 功能
showRandomQuote应该内联

自定义JS文件与彼此冲突

1 个答案: