如何使用数据属性将它们分配给 div 容器？答案

【问题标题】：How to use data attribute to assign them to a div container?如何使用数据属性将它们分配给 div 容器？
【发布时间】：2013-07-16 15:08:19
【问题描述】：

我正在尝试涉足 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下面的空中。列表的每个数据属性的内容是唯一的。幻灯片是类似于导航的缩略图：

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

$('#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.()

有解决办法吗？

【问题讨论】：

标签： jquery html containers custom-data-attribute

【解决方案1】：

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

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

更正的横幅帖子

【讨论】：

$('#info-text > span').text($(this).data('text'));
当我阅读这个问题时，似乎是答案，但 OP 的代码试图使用真的很混乱。是的，在点击处理程序中使用 $(this)
更新了答案...抱歉，对 JSNooB 现有代码感到满意的复制和粘贴哈哈
嗯，我收到以下错误 TypeError: $(...).data(...).add is not a function 我的代码现在看起来像这样：$('#carousel ul.slides > li').click(function(){ $('#info-text > span').text($(this).data('text')); console.log(this); });跨度>
如果你的代码看起来像这样<script> $('#carousel ul.slides > li').click(function(){ $('#info-text > span').text($(this).data('text')); console.log(this); }); </script>，那么你不应该收到错误....add is not a function 意味着你仍然有 .add 在某处。删除它，你应该会很好。