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

时间:2018-06-05 19:06:47

标签: javascript zurb-foundation zurb-foundation-6

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

我认为这应该可行,因为它似乎与基础文档的数据交换设置相匹配,我在控制台中没有看到任何错误来指示问题。

以下是代码:

         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'));

1 个答案:

答案 0 :(得分:0)

不确定它是否适用于这种情况,但过去是在页面加载后添加交换元素时,必须使用yyyymmdd 重新初始化Foundation。虽然我在当前的文档中找不到它。