0

フォームと生成されたコンテンツ領域があり、チェックボックスを介してセクションとサブセクションの両方が非表示になっているページがあります。（チェックボックスはページ上で非表示になっていますが、チェックボックスの「チェック済み」状態を表示するためのフィドルには非表示になっています）

これがフィドルです。たくさんのように見えるかもしれませんが、そこにぶら下がって、実際にはそうではありません。簡単な問題があるはずです。問題がどこにあるかをお見せしましょう。

ページに機能を追加しようとしています。ユーザーが左側のペインからセクションのすべてのサブセクションを選択解除すると、セクション全体が左側に非表示になり、右側のフォームでセクション全体が非表示になっていることがわかります。 （フィドルの赤いテキスト）が、永続性を維持するためにサブセクションを変更することはできません。左側のペインでサブセクションをクリックすると、すべてのサブセクションを非表示にできます。左側のセクションは非表示になり、右側のサブセクションは非表示になります。右側のヘッダーは、それが非表示になっていることを通知します。問題は、右側のヘッダーをクリックして左側のセクションを再表示すると、サブセクションが表示されなくなるか、「リセット」されることにあります。

すべてのサブセクションが非表示になっているかどうかのチェックを処理するコードは次のとおりです。

if (($('fieldset.abstract > div > input:checkbox:checked').length+1) == 7){
    //Left Side
    $('.block > .abstract > .superseven > section input').each(function(){
        $(this).prop('checked' , true);
    });
    $('.block > .abstract > .superseven > section').eq(index).hide();  
    $('.block > .abstract').hide("slow");
    //Right Side
    $('fieldset.abstract label:first').toggleClass('hidden');
    $('fieldset.abstract > div > input').each(function(){
            $(this).prop('checked' , false);
    });
    $('fieldset.abstract > div > label').each(function(){
            $(this).hide("slow");
    });

すべてのサブセクションが非表示になった後でのみ、チェックボックスをページの読み込みに「リセット」するにはどうすればよいですか？ユーザーが右側のセクションヘッダーをクリックしてセクションを左側に戻すと、すべてのサブセクションが表示されます。

  • 右側のセクションヘッダーをクリックしたときに通常の条件（JSのラベルが付いたJSの下部セクションと同様）を適用すると//Toggle Section completely、いくつかのサブセクションだけが非表示になり、次にセクション全体が非表示になった場合から、永続性が維持されません。
  • 状態変数を追跡すれば可能かもしれないと思っていましたが、Jqueryの変数スコープについてはわかりません（グローバルである必要があると思いますが、これは良い習慣ではないことを理解しています）、

  • または、Jqueryのこのセクション全体を、次のような自己呼び出し関数でラップすることもできます。

    （関数名（）{...}）（）;

私が使用できるかもしれない他のプログラミングアプローチはありますか？

js / jqueryの新機能である詳細については申し訳ありませんが、フィドルが傷つくのではなく、役立つことを願っています。

何が起こるべきかを明確にする：

  • 左側のサブセクションをすべてクリックすると、それらが消えます
  • 右側のサブセクション（すべてのチェックボックスがライブページに表示されないため、ラベルのみ）が非表示になります
  • 右側のセクションヘッダーが赤に変わるはずです
  • 右側のセクションヘッダーをクリックします
  • 左側のセクションが表示され（これまでのすべてが機能していて、ここが壊れています）、左側のすべてのサブセクションがリセットされたかのように表示されます（ページが読み込まれたときと同じですが、これだけです）特定のセクション（これらのセクションは複数あるため）、ユーザーがすべてのサブセクションを非表示にしたため、セクション全体が非表示になり、ユーザーは左側のセクションを元に戻し、すべてのサブセクションを表示する必要があります。

ノート：

現在機能している機能：

  • セクション全体をヘッダーから非表示にする
  • サブセクションの1つを除くすべてを非表示にする
  • サブセクションを非表示にしてから、セクション全体を非表示にすることを選択し、セクション全体を非表示にするときに永続性を維持する
4

1 に答える 1

1

最初のブロックの質問については、幅の問題だと思います。幅を変更してみてください。14.326647564469914の代わりに14.28を試してください（私はIPad経由で応答し、このデバイスで正しく動作します）

コメントを要約すると、次のコードは次のとおりです。最初のケースをリセットし、サブセクションの幅を正しく設定します

if(!$('.block > .abstract').is(':visible')) {
      $('fieldset.abstract #abstract_all').prop('checked' , false);
      $('.superseven ').children().show();
      var width = ((1/7)*100);
      $('.superseven ').find('div').css("width", width + '%')
于 2012-07-12T19:33:46.570 に答える