jquery - Zurb 基金会交换不工作， 'nodeName' 未定义

Question

我正在尝试使用交换来根据屏幕尺寸更改图像。

但是，当初始化交换时，不会加载图像。然后，当我调整浏览器大小(1024px 及更低)时，我在控制台中收到一条错误消息:

Uncaught TypeError: Cannot read property 'nodeName' of undefined 

与foundation.interchange.js第47行相关，即:

if (/IMG/.test(el[0].nodeName)) {

我尝试使用的代码是:

<img data-interchange="[http://www.example.com/image.png, (default)], [http://www.exmaple.com/image-large.png, (large)]" />

根据 Zurb 的文档，这完全是标准的。我已经确保这些图像存在，它们确实存在。

我使用的是 Foundation 版本 5.2.2。

有什么想法吗？

Answer 1

我遇到了这个问题，并通过一些简单的测试解决了它......

尝试其中一些:

1. 检查 - 您仅调用脚本路径“interchange.js”的一个实例

为什么？ - 这将确保您避免插件内重复的函数调用。

如何？ - Ctrl-f(查找)查看源页面上的“interchange.js”一词

这是检查它的最佳方法，特别是当您在 MVC 或嵌套 Web 表单框架中工作时。

检查 - $(document).foundation();在 interchange.js 脚本加载后调用

例如。按此顺序....

<script src="/foundation/foundation.js")></script>
<script src="/foundation/foundation.interchange.js"></script>

<script type="text/javascript">
    $(document).ready(function () {

        $(document).foundation();

     });
</script>

为什么？ - 我相信一旦基础初始化，交换就需要存在。

我希望这些选项能有所帮助 - 抱歉，如果它有点基本 - 但仍然值得一试干杯