同位素 javascript js 基本示例不起作用
Isotope javascript js basic example not working
我正在尝试让 Isotope javascript ) 在测试页上工作。
我正在尝试让他们的同位素过滤示例起作用。 （Whosebug 不允许我 post a link 因为我是 post 的新手...！）
我已将他们的示例 HTML、CSS 和 vanilla JS 复制到我域中的测试页面中：http://chrislydon.co.uk/testiso.php
（一个 php 文件，因为我想在基本正常工作后测试从 MySQL 数据库添加项目！）
我想我拥有我需要的一切：在头部引用 Isotope JS，将它们的 JS 复制到标签之间 - 以及它们的确切 HTML（和 CSS）。
我正在关注标记为 "Vanilla JS" 的示例（因为他们的其他示例依赖于 JQuery（我最终会实现...））
我看不出我做错了什么，这意味着他们示例的这个逐字副本不起作用....
（在不同的浏览器上试过 - 他们的例子在他们身上有效，但我复制的例子没有）
我对 PHP/HTML 没问题，但只用 JS 完成了基本的工作，所以我可能遗漏了一些非常明显的东西！
感谢您提供的任何帮助！
主要有两个问题：
1) 在文档的 <head> 中，您的 <script> 标签缺少 >：<script src="https://unpkg.com/isotope-layout@3/dist/isotope.pkgd.js"</script>
更改为：
<script src="https://unpkg.com/isotope-layout@3/dist/isotope.pkgd.js"></script>
2) 如果上面的初始化器在文档的<head>中运行，将没有文档可供查询并且document.querySelector('.grid')将return null.
相反，将脚本放在 </body> 标记之前。
工作 jsFiddle：
https://jsfiddle.net/dptve3s6/1
奖励：您有一个名为 myFunction 的函数附加到按钮的 onClick 事件，但该函数未在任何地方定义。定义它，享受它。
我正在尝试让 Isotope javascript ) 在测试页上工作。
我正在尝试让他们的同位素过滤示例起作用。 （Whosebug 不允许我 post a link 因为我是 post 的新手...！）
我已将他们的示例 HTML、CSS 和 vanilla JS 复制到我域中的测试页面中：http://chrislydon.co.uk/testiso.php
（一个 php 文件，因为我想在基本正常工作后测试从 MySQL 数据库添加项目！）
我想我拥有我需要的一切：在头部引用 Isotope JS，将它们的 JS 复制到标签之间 - 以及它们的确切 HTML（和 CSS）。
我正在关注标记为 "Vanilla JS" 的示例（因为他们的其他示例依赖于 JQuery（我最终会实现...））
我看不出我做错了什么，这意味着他们示例的这个逐字副本不起作用....
（在不同的浏览器上试过 - 他们的例子在他们身上有效，但我复制的例子没有）
我对 PHP/HTML 没问题，但只用 JS 完成了基本的工作，所以我可能遗漏了一些非常明显的东西！
感谢您提供的任何帮助！
主要有两个问题：
1) 在文档的 <head> 中，您的 <script> 标签缺少 >：<script src="https://unpkg.com/isotope-layout@3/dist/isotope.pkgd.js"</script>
更改为：
<script src="https://unpkg.com/isotope-layout@3/dist/isotope.pkgd.js"></script>
2) 如果上面的初始化器在文档的<head>中运行，将没有文档可供查询并且document.querySelector('.grid')将return null.
相反，将脚本放在 </body> 标记之前。
工作 jsFiddle：
https://jsfiddle.net/dptve3s6/1
奖励：您有一个名为 myFunction 的函数附加到按钮的 onClick 事件，但该函数未在任何地方定义。定义它，享受它。