JavaScript コントロール要素の初期表示の問題を修正: 動的コンテンツがデフォルトで非表示になるようにする

このチュートリアルは、ページの読み込み時に JavaScript で制御された HTML 要素が予期せず表示される問題を解決することを目的としています。チェック ボックスなどの対話型要素を使用して他のコンテンツの表示と非表示を制御する場合、JavaScript ロジックがトリガーされる前に要素が表示されることがよくあります。この記事では、2 つの効果的な解決策について詳しく説明します。1 つは JavaScript を使用してページの読み込み時に要素を明示的に非表示にする方法、もう 1 つは CSS を通じて要素のデフォルトの非表示状態を設定して、ユーザー エクスペリエンスの継続性とインターフェイスの正しい初期状態を確保する、より推奨される方法です。

問題の理解: 動的要素の初期可視性

Web 開発では、ユーザーの操作 (チェックボックスのクリックなど) に基づいて、ページ上の特定の要素を動的に表示または非表示にする必要がよくあります。ただし、よくある問題は、デフォルトで非表示にする必要があるこれらの要素が、ページの読み込み時に誤って表示されてしまうことです。これらは、ユーザー操作 (チェックボックスのクリックとクリック解除など) の後にのみ、期待どおりに非表示になります。

これは通常、要素の表示/非表示を制御する JavaScript コードが、特定のイベント (クリック イベントなど) が発生した場合にのみ起動されるためです。ページが最初に読み込まれるとき、イベントは発生しないため、JavaScript の表示/非表示ロジックはまだ実行されていないため、要素はデフォルトの表示状態のままになります。

次のシナリオを考えてみましょう。チェックボックスで時間入力フィールドの表示/非表示を切り替えます。最初は、時間入力フィールドは非表示になっている必要があります。

 <input type="checkbox" class="testmethod" id="beastmode" name="beastmode" tabindex="5">ビーストモード

<div class="入力グループの日付" id="id_1">
    <input type="text" name="day11" value="09:00 AM" class="form-control" placeholder="終了時間" title="">
    <div class="input-group-addon input-group-append">
        <div class="入力グループテキスト">
            <i class="glyphicon glyphicon-time fa fa- Clock-o"></i>
        </div>
    </div>
</div>


    $("#beastmode").click(function () {
        if ($(this).prop('checked') === true) {
            $('#id_1,#id_2').show();
        } それ以外 {
            $('#id_1,#id_2').hide();
        }
    });

この例では、id_1 (および場合によっては id_2) 要素の可視性のみが、#beastmode チェックボックスがクリックされた後のチェックボックスの状態に基づいて調整されます。 #beastmode が選択されていない場合、ページがロードされると、id_1 が表示されたままになりますが、これは予想外です。

解決策 1: JavaScript を使用してページの読み込み時に非表示を初期化する

この問題を解決するには、JavaScript を使用して、ページが読み込まれた直後に非表示操作を実行します。 jQuery の $(function() { ... }); (または $(document).ready(function() { ... });) メソッドは、DOM が完全にロードされて準備ができた後に、指定されたコード ブロックが確実に実行されるようにします。

 // $(function () {
  $('#id_1,#id_2').hide(); // ページが読み込まれるとすぐにこれらの要素を非表示にします});

$("#beastmode").click(function () {
    if ($(this).prop('checked') === true) {
        $('#id_1,#id_2').show();
    } それ以外 {
        $('#id_1,#id_2').hide();
    }
});

アドバンテージ：

• シンプルでわかりやすく、理解しやすく、実装も簡単です。
• これにより、ユーザーが要素の操作を開始する前に、要素が正しい初期非表示状態にあることが保証されます。

欠点:

• 「スタイルのないコンテンツのフラッシュ (FOUC)」が発生する可能性があります。 JavaScript ファイルの読み込みが遅い場合、または実行にわずかな遅れがある場合、要素が短時間表示されてから突然非表示になり、ユーザー エクスペリエンスが不安定になることがあります。
• ユーザーのブラウザで JavaScript が無効になっている場合、または JavaScript コードの実行が失敗した場合、これらの要素は常に表示され、非表示にすることはできません。

解決策 2: CSS を使用してデフォルトの非表示状態を設定する (推奨)

より堅牢で推奨されるアプローチは、CSS を介して要素のデフォルトの非表示状態を設定することです。このアプローチでは、JavaScript の実行に依存するのではなく、要素の初期表示の制御がスタイルシートに渡されます。

 /* 次の CSS ルールをスタイルシートまたは <style> タグに追加します*/
#id_1、#id_2 {
  表示: なし。 /* デフォルトではこれらの要素を非表示にします */
}</style>

この CSS ルールを、HTML ドキュメントの

セクションの

以上がJavaScript コントロール要素の初期表示の問題を修正: 動的コンテンツがデフォルトで非表示になるようにするの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。