1

これがJSフィドルです。コンテンツをある程度インタラクティブにしたいのですが、コンテンツをクリックするだけで非表示になります。ユーザーが必要に応じて持ち帰ることができるように<aside>、右側のセクションに非表示の部分が表示されます。親DOM要素として残しておく必要があるため、「ヘッダー」（ビジネスアプローチ）を機能させています。私は子供たちを働かせるのに苦労してきました。子供のための私の現在の試みは/これです（フィドルにも投稿されています）：

    //individual BA elements Toggle Buttons
    //Currently on, turning Off
        $('.block > .businessapproaches > section > input').on('change', function () {
            if (this.checked) {
            } else {
                var index = $(this).prevAll('section').length;
                $('.block > .businessapproaches > section').eq(index).hide();
                $('fieldset.businessapproaches > label').eq(index+1).show();
                $('fieldset.businessapproaches > input').eq(index+1).prop('checked' , false);
                console.log("off")
                console.log("left index: " + index);
                console.log($('.block > .businessapproaches > section').eq(index));
                console.log($('fieldset.businessapproaches > label').eq(index+1));
            }
        });
    //Currently off, turning On
        $('fieldset.businessapproaches > input').on('change', function () {
            if (this.checked) {
            } else {
                var index = $(this).prevAll('section').length+1;
                $('.block > .businessapproaches > section').eq(index-1).show();
                $('.block > .businessapproaches > input').eq(index-1).prop('checked' , false);
                $('fieldset.businessapproaches > label').eq(index).hide();
                console.log("on")
                console.log("right index: " + index);
                console.log($('.block > .businessapproaches > section').eq(index-1));
                console.log($('fieldset.businessapproaches > label').eq(index));
            }
        });

同じスタックに2つの質問を投稿して申し訳ありませんが、関連性があるようです。指定された時間を待たずに複数の質問を投稿できるように、すぐに125の担当者に到達しようとしています）

ボーナスポイント：「ヘッダー」（ビジネスアプローチ）がチェックボックスまたはテキストのいずれかでクリックできるのに、子供​​はクリックできない理由を教えてください。私のエラーはどこにありますか。最終的にはcssで「ボックス」を非表示にします。

4

1 に答える 1

1

フィドルhttp://fiddle.jshell.net/guanxiaohua2k6/dpvAn/1/で試しました。思い通りにできたと思います。

以下に修正箇所を示します。

@@ -10 +10 @@
-                    var index = $(this).prevAll('section').length;
+                    var index = $(this).closest('section').prevAll('section').length;
@@ -13 +13 @@
-                    $('fieldset.businessapproaches > input').eq(index+1).prop('checked' ,     false);
+                    $('fieldset.businessapproaches > input').eq(index+1).prop('checked' , true);
@@ -24 +24 @@
-                    var index = $(this).prevAll('section').length+1;
+                    var index = $(this).prevAll('input').length;
@@ -26 +26 @@
-                    $('.block > .businessapproaches > input').eq(index-1).prop('checked' , false);
+                    $('.block > .businessapproaches > section > input').eq(index-1).prop('checked' , true);

子の「ヘッダー」をクリックできなかった理由については、入力の ID が <aside> の ID と重複しています。

于 2012-06-19T02:34:58.950 に答える