How to edit data attribute value in jQuery?

Question

I am trying to…

replace the word yellow with red in data-shown…

then… add the word margin20 to data-shown

then… add the word padding20 to data-shown

then… remove the word tools from 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>

knizer · Accepted Answer · 2017-07-22 03:19:26Z

1

hope that what you need

$(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>

answered Jul 22, 2017 at 3:19

knizer

1331 silver badge9 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Monwell Partee Over a year ago

Is there also a way to add on one more word with a space…

Monwell Partee Over a year ago

like add the word… purple to existing data… with a space?

Kermit · Accepted Answer · 2017-07-22 03:44:31Z

0

I think this is easier to understand:

$(function () {
  $('.testclass').addClass('red')  
  alert($('.testclass').attr('class'))//'testclass w h yellow red'
  $('.testclass').removeClass('yellow') 
  alert($('.testclass').attr('class')) //'testclass w h red'
})

.w {
  width:100px;
}
.h {
  height:100px;
}
.red {
  background-color:red;
}
.yellow {
  background-color:yellow;
}

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

answered Jul 22, 2017 at 3:44

Kermit

1,0626 silver badges10 bronze badges

1 Comment

Monwell Partee Over a year ago

Yes… I understand the addClass… but it needed to be a data-attribute

Collectives™ on Stack Overflow

How to edit data attribute value in jQuery?

2 Answers 2

2 Comments

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Related