Question

我尝试使用同位素创建可排序菜单。长话短说：

        <script scr="scripts/jquery.js"></script>
        <script src="https://unpkg.com/isotope-layout@3/dist/isotope.pkgd.min.js"></script>
        <script>
            // Active isotope with JQuery code
            $(".main-iso").isotope({
                itemSelector: ".item",
                layoutMode: "fitRows"
            });

            // Click function

            $(".iso-nav ul li").click(function() {
                $(".iso-nav ul li").removeClass("active");
                $(this).addClass("active");

                var selector = $(this).attr("data-filter");
                $(".main-iso").isotope({
                    filter: selector
                });
                return false;
            });
        </script>

在第4行，我得到未捕获的ReferenceError：$未定义。

这是HTML

<div class="wraper">
                    <div class="iso-nav">
                        <ul>
                            <li class="active" data-filter="*">All items</li>
                            <li data-filter=".web">Web Design</li>
                            <li data-filter=".graphic">Graphic Design</li>
                            <li data-filter=".photo">Photography</li>
                        </ul>
                    </div>
                    <div class="main-iso">
                        <div class="item web"><img src="imagestest/ko1.jpg" alt="1"></div>
                        <div class="item graphic"><img src="imagestest/ko1.jpg" alt="2"></div>
                        <div class="item photo"><img src="imagestest/ko1.jpg" alt="3"></div>
                    </div>
</div>

任何想法如何使这个jQuery代码工作？提前谢谢。

Answer 1

问题是jQuery未定义。

在您的第<script scr="scripts/jquery.js"></script>行上，您声明jQuery位于相同级别的scripts文件夹中，与您所包含的页面相同。

这可能只是您忘记将其包含在项目中，但您更有可能错误地引用它。根据{{1}}文件实际所在的位置，您需要更改此引用。

您可以使用相对链接 jquery.js向上导航一个文件夹。
您可以使用根相对链接 ../始终引用根。
您可以使用绝对链接 /scripts/jquery.js从CDN加载托管版本的jQuery。

如需进一步阅读相对和绝对网址，建议您查看 Coffee Cup article 。

希望这有帮助！：）

Answer 2

执行代码时，未加载两个.js文件。因此，为什么$仍未定义。如果你移动

<script src=...>

标记到文档的头部，它们将阻止进一步运行javascript直到它们已加载。

同位素未捕获的参考错误

2 个答案: