Question

我有几个HTML链接元素，它们都有唯一的编号ID。

这些都存储在一个包装器中，它使用一个名为“data-color”的数据属性。

当用户点击链接时，我希望数据颜色采用链接的编号ID。

我以为我可以使用data（），但它似乎不起作用。

这是我的HTML：

<div id="wrapper" data-color="01">

<span>Color Box</span>

<a class="ThumbnailBox" href="#" id="02">02</a>
<a class="ThumbnailBox" href="#" id="03">03</a>
<a class="ThumbnailBox" href="#" id="04">04</a>
<a class="ThumbnailBox" href="#" id="05">05</a>
<a class="ThumbnailBox" href="#" id="06">06</a>

</div>

这是我的Jquery：

(function ($) {
    $(document).ready(function () {

        $(".ThumbnailBox").click(function () {
            selectedcolor = $(this).attr('id');
            $('#wrapper').data('datacolor', selectedcolor);

        });
    });

})(jQuery);

Answer 1

尝试这样的事情，你不必使用数据来使用它

$(".ThumbnailBox").click(function () {
    $('#wrapper').data('color', this.id);
});

更改dom中的值而不是使用attr

$('#wrapper').attr('data-color', this.id);

数据属性在第一次访问数据属性时被拉出，然后不再被访问或变异（然后所有数据值都内部存储在jQuery中）

Answer 2

你只是尝试这个代码它工作正常..

$(".ThumbnailBox").click(function () {
selectedcolor = $(this).attr('id');
    alert(selectedcolor)
$('#wrapper').attr('data-color', selectedcolor);
});

这是更新的小提琴http://jsfiddle.net/dLQHs/3/

将元素的ID分配给另一个元素的数据属性

2 个答案: