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表单框架中工作时。

2. Check-$（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>

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

我希望这些选项能有所帮助——如果有点基础的话，很抱歉——但仍然值得一试干杯