javascript - 如何在 jQuery 中编辑数据属性值？

Question

我正在努力……

将显示的数据中的黄色一词替换为红色......

然后...将单词 margin20 添加到 data-shown

然后...将单词 padding20 添加到 data-shown

然后...从显示的数据中删除“工具”一词

$(function() {
            var data = $(".testclass").attr('data-shown');
            data = data.replace('yellow', 'red');
            $(".testclass").attr('data-shown', data);

            alert($(".testclass").attr('data-shown'));
        });
    
    //alert should read - w h red margin80 padding20

[data-shown~="w"]	{width: 100px;}
[data-shown~="h"]	{height: 100px;}
[data-shown~="yellow"]	{background: yellow;}
[data-shown~="red"]	{background: red;}
[data-shown~="margin80"]	{margin: 80px;}
[data-shown~="padding20"]	{padding: 20px;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div data-shown="w h yellow tools" class="testclass">test</div>

Answer 1

希望是你所需要的

$(function() {
            var data = $(".testclass").attr('data-shown');
            data = data.replace('yellow', 'red');
            $(".testclass").attr('data-shown', data);

            alert($(".testclass").attr('data-shown'));
        });

[data-shown~="w"]	{width: 100px;}
[data-shown~="h"]	{height: 100px;}
[data-shown~="yellow"]	{background: yellow;}
[data-shown~="red"]	{background: red;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div data-shown="w h yellow" class="testclass">test</div>