0

何らかの理由で、data-active属性に格納されているデータを使用してアコーディオンパネルをアクティブ化できませんか？

私のHTMLは次のようになります（アコーディオンに変換され、すべてのクラスが追加された後）：

<div class="gcAccordion  ui-accordion ui-widget ui-helper-reset" style="" data-active="1" role="tablist">
    <h3 class="gcAccordionTitle  ui-accordion-header ui-helper-reset ui-state-default ui-corner-all ui-accordion-icons" style="display: block;" role="tab" id="ui-accordion-1-header-0" aria-controls="ui-accordion-1-panel-0" aria-selected="false" tabindex="0"><span class="ui-accordion-header-icon ui-icon ui-icon-triangle-1-e"></span>This is a title</h3>
    <div class="gcAccordionContent  ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="display: none;" id="ui-accordion-1-panel-0" aria-labelledby="ui-accordion-1-header-0" role="tabpanel" aria-expanded="false" aria-hidden="true">This is some content</div>
    <h3 class="gcAccordionTitle  ui-accordion-header ui-helper-reset ui-state-default ui-corner-all ui-accordion-icons" style="display: block;" role="tab" id="ui-accordion-1-header-1" aria-controls="ui-accordion-1-panel-1" aria-selected="false" tabindex="-1"><span class="ui-accordion-header-icon ui-icon ui-icon-triangle-1-e"></span>This is a 2nd title</h3>
    <div class="gcAccordionContent  ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="display: none;" id="ui-accordion-1-panel-1" aria-labelledby="ui-accordion-1-header-1" role="tabpanel" aria-expanded="false" aria-hidden="true">This is some 2nd content</div>
    <h3 class="gcAccordionTitle  ui-accordion-header ui-helper-reset ui-state-default ui-corner-all ui-accordion-icons" style="display: block;" role="tab" id="ui-accordion-1-header-2" aria-controls="ui-accordion-1-panel-2" aria-selected="false" tabindex="-1"><span class="ui-accordion-header-icon ui-icon ui-icon-triangle-1-e"></span>This is a 3rd title</h3>
    <div class="gcAccordionContent  ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="display: none;" id="ui-accordion-1-panel-2" aria-labelledby="ui-accordion-1-header-2" role="tabpanel" aria-expanded="false" aria-hidden="true">This is some 3rd content</div>
</div>

Javascript：

$('.gcAccordion').accordion({
  collapsible: true,
  heightStyle: "content",
  autoHeight: false,
  active: false,
  create: function(event, ui){
    $('.gcAccordion').each(function(){
      console.log($(this).attr('data-active'));
      $(this).accordion( "option", "active", $(this).attr('data-active'));          
    });
  }      
});

console.log呼び出しは、ログに1を適切に出力しますが、何らかの理由で2番目のパネルをアクティブにしません。javascriptの9行目にこの行を使用すると、次のように機能します。

$(this).accordion( "option", "active", 1);

ただし、data-active属性1の値では機能しません。何が起こっているのかアイデアはありますか？

編集：ページがアクティブでなくなり、すべてのコードが問題になっているため、リンクを削除しました。

アップデート：

助けてくれてありがとう。私はする必要がありましたparseInt($(this).attr('data-active'))

4

1 に答える 1

3

によって返される値のタイプは.attr()文字列です。真/偽（0/1）の値が必要だと思いますので、次のことを試してください。

$(this).accordion("option", "active", +$(this).attr('data-active'));

単項演算子は、文字列を数値に変換する+に似てparseIntいますが、構文解析がそれほど厳密ではなく、高速です（私は思います）。

より良いかもしれない何かは：

$(this).accordion("option", "active", $(this).attr('data-active') === "1" ? 1 : 0);

data-activeこれにより、属性が存在し、その値が「1」の場合にのみ、アコーディオンペインがアクティブになります。存在/値の他の組み合わせは、ペインを開きません。

編集：

OPが指摘したように、「アクティブ」オプションは0ベースの整数を受け入れるため、2番目の例は無視してください。なんらかの理由でtrue/falseを受け入れたと思いました。

于 2013-03-26T13:59:17.723 に答える