时间戳

首页 > 解决方案 > Foundation 6 - 使用不显示图像的 JavaScript 填充 img 标签数据交换

javascript - Foundation 6 - 使用不显示图像的 JavaScript 填充 img 标签数据交换

问题描述

我正在尝试修复一些代码，这些代码旨在使用 JavaScript 为滑块中的图像生成数据交换值，但除非我有 src 标记，否则我无法让它工作，即使那样，唯一要显示的图像是我在 src 标签中引用的任何内容。

我觉得这应该可以工作，因为它似乎与根据 Foundation 文档的数据交换设置相匹配，并且我在控制台中没有看到任何错误表明存在问题。

这是代码：

         var animallink = $('<a></a>').attr('href', animals[randomkeys[a]].link);
                console.dir(animallistitem);

                $('<img />').attr({
                    'data-interchange': '[' + uploaddirectory + animals[randomkeys[a]].images.med + ', small], [' + uploaddirectory + animals[randomkeys[a]].images.med + ', medium],  [' + uploaddirectory + animals[randomkeys[a]].images.lg + ', large]',
                    'class':'orbit-image',
                    'alt': animals[randomkeys[a]].images.alttext
                }).appendTo(animallink);
                var animalcontainer = $('<div></div>').addClass('related__item-content');

                $('<h2>' + dyktext + '</h2>').appendTo(animalcontainer);
                $('<h3></h3>').addClass('related__name').text(nametext + animals[randomkeys[a]].animal).appendTo(animalcontainer);

                if(animals[randomkeys[a]].location != ""){
                    $('<h3></h3>').addClass('related__location').text(locationtext + animals[randomkeys[a]].location).appendTo(animalcontainer);
                }

                var rndnum = Math.round(Math.random() * (animals[randomkeys[a]].animalfacts.length - 1));

                $('<p></p>').addClass('related__description').html(animals[randomkeys[a]].animalfacts[rndnum].replace('\u0026', '&')).appendTo(animalcontainer);
                $('<div></div>').addClass('related__cta').html(morelinktext + ' <i class="fa fa-arrow-circle-right" aria-hidden="true"></i>').appendTo(animalcontainer);

                animalcontainer.appendTo(animallink);

                animallink.appendTo(animallistitem);

                animallistitem.appendTo(animallist);
            });

            var orbit = new Foundation.Orbit($('.related__animal-facts .orbit'));

标签： javascriptzurb-foundationzurb-foundation-6

解决方案

不确定它是否适用于这种情况，但过去在页面加载后添加交换元素时，必须使用$(document).foundation(). 尽管我在当前文档中找不到任何提及。

推荐阅读