时间戳

首页 > 解决方案 > 如何使用材料箱

javascript - 如何使用材料箱

问题描述

我正在尝试在 Materialise 中使用 Materialbox，但缩放效果似乎不起作用。虽然 CSS 悬停有效，但单击不会按应有的方式放大图像。

我已经尝试过网站上显示的 jQuery 方法和非 jQuery 方法。我已确保在脚本之前加载 jQuery，并尝试将脚本包含在标签中的 html 中以及将其放入另一个文件中。

<!DOCTYPE html>
<html>
<head>
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <link rel="stylesheet" href="css/materialize.min.css">
</head>

<body>
    <div class="container">
        <div class="row">
            <div class="col s12">
                <!--This is the where the image is-->
                <img class="materialboxed" width="300" src="assets/model.jpg">
            </div>
        </div>
    </div>
    <script src="js/materialize.min.js"></script>
    <script src="js/jquery-3.4.1.min.js"></script>
    <!--I used the provided code on the Materialize website--> 
    <script>
        $(document).ready(function(){
            $('.materialboxed').materialbox();
        });
    </script>
</body>
</html>

查看控制台，我收到三个错误：

源文件“file:///Users/ned/Desktop/website/js/jquery-3.4.1.min.js”的加载失败。

ReferenceError: $ 未定义

未声明 HTML 文档的字符编码。该文档将呈现...

每当我尝试在单独的文件中使用代码片段时，我的编辑器也会抛出 ReferenceError。

标签： javascripthtmlmaterialize

解决方案

尝试这个：

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="js/materialize.min.js"></script>

而不是这个：

<script src="js/materialize.min.js"></script>
<script src="js/jquery-3.4.1.min.js"></script>

实际上，materialize 本身在其代码中使用了 jQuery，因此必须先包含 jQuery，然后再包含 jQuery materialize.min.js。

这个对我有用。

推荐阅读