Why the jQuery data(); function is not writing the data atribute assignment into the HTML?

Question

I have read it is a good practice to use the data- attribute to trigger CSS changes. I have this menu I want to build, and I want to change some CSS when the user clicks on a button.

I have some CSS rules set to open and closed, which I want to toggle depending on the data-attribute. I am setting the a data-atrib to data-navtogle on a dom node.

<div class="collapsing-navigation" data-navtoggle="closed">

I select that DOM node and change its value from closed to open.

menuMobile.navtoggle = 'open';

But it stays the same in the DOM, however if I call the attribute in the console it says it is open.

console.log('current attr is ='+ menuMobile.navtoggle); //current attr is open

In the console it says its open but in the DOMit says it still closed.

HTML

<nav class="navigation">
      <div class="navigation-header">Header
        <button type="button" class="menu-toggle">
          <span class="sr-only">Toggle navigation</span>
          <span class="hamburger-menu"></span>
          <span class="hamburger-menu"></span>
          <span class="hamburger-menu"></span>
        </button>
      </div>
      <div class="collapsing-navigation" data-navtoggle="closed">
        <ul>
          <li class=""><a href="#">Home</a></li>
          <li class=""><a href="#">About</a></li>
          <li class="">
            <a href="#">Solutions</a>
            <ul>
              <li class=""><a href="#">Sub 1</a></li>
              <li class=""><a href="#">Sub 2</a></li>
              <li class=""><a href="#">Sub 3</a></li>
            </ul>
            </li>
          <li class=""><a href="#">Mobile</a></li>
          <li class=""><a href="#">News</a></li>
          <li class=""><a href="#">Contact</a></li>
        </ul>
      </div>
    </nav>

Javascript:

$(function(){

  var menuToggle = $('.menu-toggle');
  var menuMobile = $('.collapsing-navigation');

  menuToggle.on('click',function(){

     if( menuMobile.data('navtoggle')==='closed' ){
       console.log("it was closed and im setting it to open");

       menuMobile.navtoggle = 'open';
       console.log('current attr is ='+ menuMobile.navtoggle);


     }
  });
});

CSS:

.collapsing-navigation[data-navtoggle=closed]
  height: 0

.collapsing-navigation[data-navtoggle=open]
  height: 100vh

.collapsing-navigation
  background-color: #00F
  height: 100vh
  position: relative
  z-index: 10

data saves only to its JS object that `data` field, you should use `.attr('data-yourdatalink')` instead, which updates dom. — Michael, Sep 01 '15 at 14:14
possible duplicate of [where is jQuery.data() stored?](http://stackoverflow.com/questions/5821520/where-is-jquery-data-stored) — War10ck, Sep 01 '15 at 14:17

score 2 · Answer 1 · answered Sep 01 '15 at 14:16

Because the jQuery data method allows you to set any value. If it had to be converted into an attribute, then it would have to be a string value (or something that could be converted into a string).

I have read it is a good practice to use the data- attribute to trigger CSS changes.

In general, I'd suggest that using a class would be better.

CSS class selectors are simpler to write, and jQuery addClass / removeClass are convenient to use.

kapantzak · Answer 2 · 2015-09-02T06:33:11.443

For the change of data-attribute to take place in the DOM use attr('data-navtoggle', newAttr)

The data('navtoggle') assigns a new value but does not affect the DOM

Check the following example:

$(document).on('click', '#btn-data', function() {
  $('#test').data('test','green');
});
$(document).on('click', '#btn-attr', function() {
  $('#test').attr('data-test','green');
});

div[data-test="red"] { color:red }
div[data-test="green"] { color:green }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="test" data-test="red">Test div</div>
<button id="btn-data">Change to green via .data()</button><br />
<button id="btn-attr">Change to green via .attr()</button>

score 1 · Answer 3 · answered Sep 01 '15 at 14:15

1

Setting some data via jQuery.data doesn't modify the DOM. If you need the DOM updated you should use .attr instead like this:

$("elem").attr("data-navtoggle", "newvalue");

answered Sep 01 '15 at 14:15

Diego

16,436
26
84
136

Why the jQuery data(); function is not writing the data atribute assignment into the HTML?

3 Answers3