如何在Drupal 8上有效我的代码jQuery函数

Question

我想将我的gray()函数应用于我网站上的img。

我已经在drupal 8中安装了我的库，我可以在我的package.json中看到我的库，并且我已经在我的库文件中声明了它。

这是我的代码jquery：

(function ($) {
    $('img').gray();
}(jQuery));

但它不起作用。

Answer 1

您正在使用自调用函数，一旦在 Javascript 中遇到它，就会立即执行。 所以有时 DOM 还没有准备好在这种情况下。尝试将函数调用放在文档就绪函数中。文档就绪将在 DOM 就绪后遇到。

$(document).ready(function(){
 $('img').gray(); 
});

Answer 2

在 js 代码中使用 drupal 行为。有时 js 会因为混合不同的库而发生冲突。

Answer 3

我相信

您在网站上还有其他一些问题，因为您发布的代码有效，添加此答案以表明它是。

图片借自：https://meta.stackexchange.com/a/4389/139898

(function ($) {
    $('img').gray();
 }(jQuery));

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link href="https://npmcdn.com/jquery-gray@1.6.0/css/gray.min.css" rel="stylesheet"/>
<script src="https://npmcdn.com/jquery-gray@1.6.0/js/jquery.gray.min.js"></script>
<img src="https://i.stack.imgur.com/BPfiX.jpg" alt="notfoundme"  class="grayscale"/>