-2

私はこの正確な機能を達成しようとしています:http: //jsfiddle.net/exttq/ しかし、私のPHPを使用して内部で、現在2つのチェックボックスと2つのフォームを表示していますが、必要なのは:これらの2つのフォームは、いずれかをチェックしない限り表示されるべきではありません箱..

そのため、以下のコードで何が問題なのかを確認してください...

function eshop_extras_checkout($echo){


    $echo .= '

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> 

    <script>

    $(".formGroup").hide();
    $("#chooseForm input:checkbox").on("change", function() {
        if($(this).is(":checked")) {
            $("#" + $(this).val()).show();
        }
        else {
            $("#" + $(this).val()).hide();
        }
    });
    ​
</script>';

    $echo .= '<fieldset class="eshop eshop_extra">' . "\n";


    $echo .= ' <form id="chooseForm">
        <input type="checkbox" name="form1" value="form1"> Form1<br>
        <input type="checkbox" name="form1" value="form2"> Form2<br>
    </form>

    <form id="form1" class="formGroup">
        <h2>FORM 1</h2>
        <label>Name</label><input type="text"> <br>
        <label>Address</label><input type="text">
    </form>

    <form id="form2" class="formGroup">
        <h2>FORM 2</h2>
        <label>Username</label><input type="text"> <br>
    </form>';


    $echo .= '<legend>Articles Order Form</legend>' . "\n";



    return $echo;
}

あなたの返事を待っています...

4

1 に答える 1

3

問題は、要素が DOM に存在する前にスクリプトが実行されることです。見る：

//when this line executes:
$(".formGroup").hide(); //the .formGroup is not present in the DOM yet
//in other words, the jQuery object is empty and calling .hide() does nothing

//the same happens to this handler binding:
$("#chooseForm input:checkbox").on("change", ...

あなたのフィドルの JS はonDomReadyラッパーを使用するように設定されているため、そこで適切に動作します。

スクリプトをフォームの HTML の下に配置したり、スクリプトの内容をDOM 対応の handler内に単純にラップしたりできます。

$(function() {
    $(".formGroup").hide();
    $('#chooseForm input:checkbox').on('change', function() {
        if($(this).is(':checked')) {
            $("#" + $(this).val()).show();
        }
        else {
            $("#" + $(this).val()).hide();
        }   
    });
});

jQuery のベスト プラクティスの 1 つは、常にコードをDOM 対応の handlerでラップすることです。

$(document).ready(function() {
    //code here
});

またははるかに短い省略形:

$(function() {
    //code here
});

どちらも同じ効果があり、DOM の準備が整うまでコードの実行を防ぎます。

もう 1 つの JavaScript のベスト プラクティスは、JS コードをページのフッター ( の直前</body>) に配置することです。この方法では、スクリプトの読み込みによってページのレンダリングがブロックされず、DOM パーサーがスクリプトに到達したときに、DOM は既に準備ができています。 .

上記の両方のベスト プラクティスは組み合わせることができます。それでも、DOM 対応ハンドラーを使用するだけで問題は解決し、スクリプトをフォーム HTML の下に移動するだけでも十分です。

フレームワークはすでにモードで jQuery の別のコピーをロードしています。つまり、グローバル スコープでエイリアスをnoConflict使用することはできません。$これを改善するには、この特別な DOM 対応構文を使用できます。これは、jQuery を$そのスコープ内にエイリアスします。

jQuery(function($) {
    $(".formGroup").hide();
    $("#chooseForm input:checkbox").on("change", function() {
        if($(this).is(":checked")) {
            $("#" + $(this).val()).show();
        }
        else {
            $("#" + $(this).val()).hide();
        }
    });
});

詳細については、DOM 対応ハンドラー ドキュメント - jQuery 名前空間のエイリアシング: を参照してください。

別の JavaScript ライブラリを使用する場合、 $.noConflict()名前空間の問題を回避するために呼び出したい場合があります。この関数が呼び出されると、$ショートカットが使用できなくなり、 jQuery通常は$. ただし、メソッドに渡されるハンドラーは.ready()、グローバルjQueryオブジェクトに渡される引数を取ることができます。これは、.ready()他のコードに影響を与えることなく、ハンドラーのコンテキスト内でオブジェクトの名前を変更できることを意味します。

于 2012-10-19T23:39:41.470 に答える