为什么HTML ()；函数没有将数据属性赋值写入jQuery？

Question

我读到过，使用data- attribute触发CSS更改是一种很好的做法。我有这个菜单，我想要建立，我想改变一些CSS时，用户点击一个按钮。

我将一些CSS规则设置为open和closed，希望根据data-attribute进行切换。我在一个dom节点上将a data-atrib设置为data-navtogle。

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

我选择该DOM节点并将其值从closed更改为open。

menuMobile.navtoggle = 'open';

但是它在DOM中保持不变，但是如果我在控制台中调用该属性，它会显示它是打开的。

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

在控制台中，它显示它是打开的，但在DOMit中，它仍然关闭。

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

Answer 1

因为jQuery数据方法允许您设置任何值。如果必须将其转换为属性，则必须是字符串值(或可转换为字符串的内容)。

我读到过，使用数据属性来触发CSS更改是一个很好的实践。

总的来说，我建议使用一个类会更好。

CSS类选择器编写起来更简单，jQuery addClass / removeClass使用起来也很方便。

Answer 2

对于在DOM中发生的data-attribute更改，请使用attr('data-navtoggle', newAttr)

data('navtoggle')会分配一个新值，但不会影响DOM

检查以下示例：

​

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

​

Answer 3

通过jQuery.data设置一些数据不会修改DOM。如果您需要更新DOM，则应该使用.attr，如下所示：

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