0

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

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

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

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

这是一个JSFIDDLE。

这是我的 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);
4

2 回答 2

2

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

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

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

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

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

于 2013-10-24T12:15:30.430 回答
1

您只需尝试此代码即可正常工作..

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

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

于 2013-10-24T12:22:12.837 回答