Question

如何通过Drupal 8模块使用jQuery？我正在尝试在drupal 8网站上运行一些jquery代码。它是一个div动画，可以在包装器中随机移动div。我已经添加了JS和CSS文件，它们都在源代码中显示。我已经将'容器'的Div ID添加到html.html.twig（是的，我先将它复制到我的主题文件夹中） -

{%
  set body_classes = [
    logged_in ? 'user-logged-in',
    not root_path ? 'path-frontpage' : 'path-' ~ root_path|clean_class,
    node_type ? 'page-node-type-' ~ node_type|clean_class,
    db_offline ? 'db-offline',
    theme.settings.navbar_position ? 'navbar-is-' ~ theme.settings.navbar_position,
    theme.has_glyphicons ? 'has-glyphicons',
    'container',
  ]
%}

还添加了一个用于此的div。再次在html.html.twig

中

<js-bottom-placeholder token="{{ placeholder_token|raw }}"> //**Not part of my code just adding it for comparison.
   <div class='fly'>TEST DIV, IF I MOVE I'M WORKING!</div>

因此文件显示在源中，源也显示已添加容器的div ID。

这是jQuery代码，请记住我已将其调整为与Drupal 8配合使用，因此可能存在一两个语法错误。

$.extend(Drupal.theme, {
  animateDiv: (function() {
    ($('.fly')); }),

*几乎可以确定问题在这里^^^

  makeNewPosition: function ($container) {
    // Get viewport dimensions (remove the dimension of the div)
    var h = $container.height() - 10;
    var w = $container.width() - 10;

    var nh = Math.floor(Math.random() * h);
    var nw = Math.floor(Math.random() * w);

    return [nh, nw];
},

animateDiv: function ($target) {
    var newq = makeNewPosition($target.parent());
    var oldq = $target.offset();
    var speed = calcSpeed([oldq.top, oldq.left], newq);

    $target.animate({
        top: newq[0],
        left: newq[1]
    }, speed, function() {
        animateDiv($target);
    });

},

calcSpeed: function (prev, next) {

    var x = Math.abs(prev[1] - next[1]);
    var y = Math.abs(prev[0] - next[0]);

    var greatest = x > y ? x : y;

    var speedModifier = 0.23;

    var speed = Math.ceil(greatest / speedModifier);

    return speed;

}  



});

这是CSS代码

.fly {
width: 50px;
height:50px;
background-color: red;
position:fixed;

}

这就是我尝试过的，但仍然没有jQuery活动，我也尝试过使用不同类型的类名（.div而不是#div等），我认为这就是问题所在。飞行div显示但没有被设计风格，并且没有jQuery。我做错了什么？

更新：玩了一段时间的代码后，我已经设法至少得到了在div上显示的样式。 jQuery仍然没有显示..

Answer 1

在这里得到答案https://drupal.stackexchange.com/questions/214483/how-do-i-use-jquery-code-through-a-module-theme/214485?noredirect=1#comment262213_214485 显然我的Drupal / jQuery语法不正确。

如何通过Drupal 8模块使用jQuery代码？

1 个答案: