0

質問したいです。私はこの2つのdivクラスをそれぞれに同じhtml要素を持っていました(実際、私のプロジェクトには非常に多くの井戸クラスがあります)。各ウェル div には、表示と非表示の機能がありました。私の問題は、jquery と jquery cookie を使用して、各ウェル div.Im のみの非表示/表示状態を保存したいということです。私はそれを成し遂げることができましたが、すべてのdivはjquery Cookieの影響を受けています。私はそれが間違っていることを知っており、jquery cookie を適切に記述して各 div の状態のみを保存する方法がわかりません。出てくるのはこれ。

<div class="well dark_turq">
    <div class="well-header">
        <h5>Charts and Statistics</h5>
        <ul>
            <li class="collapse_well">
                <a href="#" rel="tooltip" title="Minimize">
                    <i class="icon-minus"></i>
                </a>
            </li>
        </ul>
    </div>
    <div class="well-content">
        <div class="tab-content">
            Content 1
        </div>
    </div>
</div>
<div class="well green">
    <div class="well-header">
        <h5>Charts and Statistics</h5>
        <ul>
            <li class="collapse_well">
                <a href="#" rel="tooltip" title="Minimize">
                    <i class="icon-minus"></i>
                </a>
            </li>
        </ul>
    </div>
    <div class="well-content">
        <div class="tab-content">
            Content 2
        </div>
    </div>
</div>

一番下は私のjqueryコードです。私はすでにjquery Cookieを含めました。

var showing = $.cookie('wellState') == 'show';

if(showing){

    $('.well-content').show();
}
else{
    $('.well-content').hide();
}

$('li.collapse_well a').click(function() {
    var container = $(this).parents('.well').find('.well-content');
    if(container.is(":hidden")) {
      container.slideDown(200);
      $.cookie('wellState', 'show');
      $(this).find('i').removeClass('icon-plus').addClass('icon-minus');
      $(this).attr('title','Minimize');
    } else {
      container.slideUp(200);
      $.cookie('wellState','hide');
      $(this).find('i').removeClass('icon-minus').addClass('icon-plus');
      $(this).attr('title','Maximize');
        }
        return false;
  });

誰かがこのスレッドについて何か助けや提案をしてくれることを願っています. これはそのEXAMPLEのjsfiddleです

4

2 に答える 2

0

わかりましたので、各 div の状態を個別に保存する必要があります。これは論理的です。次の 2 つの方法をお勧めします。

1) 各 div.well に一意の ID を割り当てます

<div class='well ...' id='wellState_0'>
...
<div class='well ...' id='wellState_1'>
...

そして、それらの ID を Cookie に保存します。

$.cookie($(this).parents('.well').attr('id'), 'show')

2) div の数え上げを使用して、javascript を使用して ID を自動的に生成します。

$.cookie(
    'wellState_' +
    $('.well').index($(this).parents('.well')[0]),
    'show'
)
于 2013-09-23T08:51:33.810 に答える