2

我正在尝试进入 HTML5 和 JS 的东西。现在还不太成功。

我想将“li”元素中的一些数据属性动态加载到 div 容器中。div 容器将为 flexslider 的幻灯片提供一些附加信息。

HTML：

<div id="carousel" class="flexslider">
    <ul class="slides">
        <li data-text="Text 1">
            <img src="http://placehold.it/90x75/00CC00/ffffff" />
        </li>
        <li data-text="Text 2">
            <img src="http://placehold.it/90x75/CD0074/ffffff" />
        </li>
        <li>
            <img src="http://placehold.it/90x75/FF7400/ffffff" />
        </li>
        <li>
            <img src="http://placehold.it/90x75/FF0000/ffffff" />
        </li>
    </ul>
</div>

“data-text”元素应通过单击打印在div的以下空<“span”>中。列表的每个数据属性的内容是唯一的。幻灯片是充当导航的缩略图：

<div class="info-text"> <span></span>
    <a class="votebutton" href="#">Abstimmen</a>
</div>

JS

$('#carousel ul.slides > li').click(function () {
    $('#carousel ul.slides > li').data('text').add('#info-text > span');
    console.log($('#carousel ul.slides > li').data('text'));
});

我知道寻求解决方案很懒，但我试图找出解决方案三个小时。尝试使用 .add()、.appendTo() 和 attr.()

有解决办法吗？

4

1 回答 1

2

如果我理解正确，这可能是您正在寻找的代码

$('.info-text > span').text($(this).data('text'));

更正的横幅帖子

于 2013-07-16T15:11:05.940 回答