Question

我创建了一个如下所示的 index.html 文件：

<section id="slider" class="slider-element slider-parallax" style="background: url('assets/images/reyl/architecture-bank-bridge-417411.jpg'); background-size: cover;" data-height-xl="670" data-height-lg="500" data-height-md="400" data-height-sm="250" data-height-xs="200">
  <div class="slider-parallax-inner">
    <div class="container clearfix">
      <div class="slider-caption slider-caption-center">
        <h2 data-animate="fadeInUp">
          <div class="text-rotater" data-separator="|" data-rotate="zoomIn" data-speed="10000">
            In Our <span class="t-rotate">Life|Family|Life|Home</span>
          </div>
        </h2>
        <p class="d-none d-sm-block" data-animate="fadeInUp" data-delay="200">Le Magazine des collaborateurs du Groupe REYL, No 1 Décembre 2018</p>
      </div>
    </div>
  </div>
</section>

<app-root></app-root>

<script src="assets/js/jquery.js"></script>
<script src="assets/js/plugins.js"></script>
<script src="assets/js/functions.js"></script>

<app-root></app-root>正在调用src / app / home /中的名为 home.component.html 的文件。

我的滑块（ #slider ）以及functions.js文件中定义的所有功能都可以正常工作。

当我尝试将#slider部分从 index.html 移到 home.component.html 时出现问题。当我这样做时，functions.js中定义的所有函数都停止工作（我不断收到有关缺少库的错误，或者我的函数找不到DOM元素）。

我应该如何解决此类问题？

请在下面找到函数textRotator（）（functions.js）的内容，该函数应该为div “。text-rotater” 动画。当 #slider div位于 home.component.html 。

textRotater: function(){

  if( !$().Morphext ) {
    console.log('textRotater: Morphext not Defined.');
    return true;
  }

  console.log('textRotater()');
  console.log('$textRotaterEl');
  console.log($textRotaterEl);
  console.log('$textRotaterEl.length');
  console.log($textRotaterEl.length);

  if( $textRotaterEl.length > 0 ){
    $textRotaterEl.each(function(){
      var element = $(this),
        trRotate = $(this).attr('data-rotate'),
        trSpeed = $(this).attr('data-speed'),
        trSeparator = $(this).attr('data-separator');

      if( !trRotate ) { trRotate = "fade"; }
      if( !trSpeed ) { trSpeed = 1200; }
      if( !trSeparator ) { trSeparator = ","; }

      var tRotater = $(this).find('.t-rotate');

      var pluginData = tRotater.Morphext({
        animation: trRotate,
        separator: trSeparator,
        speed: Number(trSpeed)
      });

      console.log( pluginData );
    });
  }
},

变量在functions.js文件的末尾定义

var $window = $(window),
  $body = $('body'),
  $wrapper = $('#wrapper'),
  $header = $('#header'),
  $headerWrap = $('#header-wrap'),
  $content = $('#content'),
  $footer = $('#footer'),
  windowWidth = $window.width(),
  $portfolio = $('.portfolio'),
  $shop = $('.shop'),
  $gridContainer = $('.grid-container'),
  $slider = $('#slider'),
  $sliderParallaxEl = $('.slider-parallax'),
  $sliderElement = $('.slider-element'),
  $textRotaterEl = $('.text-rotater'),
  $cookieNotification = $('#cookie-notification');
(...)

应该在DOM准备就绪时调用函数：

$(document).ready( SEMICOLON.documentOnReady.init );
$window.on( 'load', SEMICOLON.documentOnLoad.init );
$window.on( 'resize', SEMICOLON.documentOnResize.init );

如何正确加载JavaScript文件？

0 个答案: