1

我正在对 Collapse javascript 组件进行一些测试，但我发现尝试显示#collapseOnediv 元素中的数据属性时出现了一些奇怪的现象。

我使用他们网站上的引导程序示例进行此测试：

<div class="accordion" id="accordion2">
  <div class="accordion-group">
    <div class="accordion-heading">
      <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">
        Collapsible Group Item #1
      </a>
    </div>
    <div id="collapseOne" class="accordion-body collapse in">
      <div class="accordion-inner">
        Anim pariatur cliche...
      </div>
    </div>
  </div>
  <div class="accordion-group">
    <div class="accordion-heading">
      <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo">
        Collapsible Group Item #2
      </a>
    </div>
    <div id="collapseTwo" class="accordion-body collapse">
      <div class="accordion-inner">
        Anim pariatur cliche...
      </div>
    </div>
  </div>
</div>

我将此代码启动到我的控制台中：

JSON.stringify($('div#collapseOne').data())

我知道{}这是正常的，因为我在这个元素上没有data属性，但是如果我单击第二个手风琴，然后再次启动

JSON.stringify($('div#collapseOne').data())

我得到"{"collapse":null}"了，但是在控制台中，div 看起来像：

<div id="collapseOne" class="accordion-body collapse" style="height: 0px;">...</div>

所以，由于没有data-collapse属性，我不明白如何.data()返回这个......？

我不明白的第二个行为是，如果我点击第一个手风琴然后启动

JSON.stringify($('div#collapseOne').data())

我在 chrome 上收到此错误TypeError: Converting circular structure to JSON，而 firefox 能够打印

{"collapse":{"$element":{"0":{"jQuery191023166512553611396":4},"context":{"jQuery191023166512553611396":4},"length":1},"options":{"toggle":"collapse","parent":"#accordion2"},"$parent":{"length":1,"0":{},"context":{"jQuery191023166512553611396":1,"location":{}},"selector":"#accordion2"},"transitioning":0}}

我真的很想知道这些数据隐藏在哪里，因为我无法通过检查元素在 HTML 上看到它。

4

1 回答 1

2

jQuery.data()不是元素data属性的直接反映。这些值由 jQuery 解释并在内部存储在内存中。如果手动向元素添加一些数据，则无法通过.attr().

$(function () {
    var element = $('#uniqueId');

    element.data('foo', 'bar');
    console.warn(element.attr('data-foo'));
    // console will warn undefined instead of 'bar' as expected

    console.error(element.data('foo'));
    // console will error 'bar' as expected

    // edit in response to a comment
    element.attr('data-baz', 'test');
    console.log(element.data('baz'));
    // console *will* log 'test'

    // manually add a data attribute to the element
    console.warn(element.data('myNewDataAttr'));
    // console *will* warn your newly added data attr

});

这些值也被转换为 jQuery 认为的值，在 的情况下data-bool="true"，值$.data('bool')将是类型boolean而不是string预期的。

于 2013-03-16T19:11:53.833 回答