Question

我试图在Materialize中使用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。

Answer 1

尝试一下：

<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>

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

对我有用。

我如何使用Materialbox

1 个答案: