1

#collapseOneCollapse javascript コンポーネントでいくつかのテストを行っていたところ、 div 要素からデータ属性を表示しようとして奇妙なことがわかりました。

このテストを行うために、彼らの Web サイトのブートストラップの例を使用しました。

<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、2番目のアコーディオンをクリックして再度起動すると

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

を取得します"{"collapse":null}"が、コンソールでは div は次のようになります。

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

では、属性がないので、これを返すdata-collapse方法がわかりません.data()...?

私が理解していない2番目の動作は、最初のアコーディオンをクリックしてから起動すると

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

});

これらの値は、j​​Queryが信じている値にもキャストされます。の場合data-bool="true"、の値は$.data('bool')型であり、期待どおりbooleanではありませんstring。

于 2013-03-16T19:11:53.833 に答える