CODEWITHSUNDEEP
javascriptjquery
Monwell Partee
Monwell Partee

Reputation: 718

How to edit data attribute value in jQuery?

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>

Upvotes: 0

Views: 71

Answers (2)

Kermit
Kermit

Reputation: 1062

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>

Upvotes: 0

knizer
knizer

Reputation: 133

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>

Upvotes: 1

Related Questions