最近、たくさんの人に改変してもらったフレームワークに取り組んでいます。毎日コードを見ていると目が回りそうですが、かなり進歩していると感じています。フロントエンドを設定して、2 つのライブラリの異なるデータ範囲を表示できるバックエンドを作成しました。かなり満足のいく出来なので、先日共有しました。今日は、ここ数日で作成した機能、HTML ページの検索機能についてお話します。 この機能は主に、検索ボックスに文字を入力し、後ろにある前または次のボタンを押します。検索領域内の一致する文字は、自動的に特別なスタイルでマークされます。その後、前または次のボタンを押し続けると、一致する文字を順番に参照し、別のスタイルを使用して、現在の一致する文字を他の一致する文字と区別することができます。 フロントエンドの表示は次のようになります。 HTML は次のようになります: <div class="container" style="z-index: 999" id="searchDiv"> <div class="キーワード検索"> 検索する: <input id="key" type="text" style="width: 200px;" placeholder="キーワード" /> <a href="javascript:void(0);" class="prev" onclick='wordSearch(1)'><i class="c-icon"></i></a> <a href="javascript:void(0);" class="next" onclick='wordSearch()'><i class="c-icon"></i></a> </div> </div> スクリプトコード: <script>//検索関数 var oldKey0 = ""; var index0 = -1;var oldCount0 = 0; var 新しいフラグ = 0; var 現在の長さ = 0; 関数 wordSearch(flg) { var key = $("#key").val(); //キー値を取得するif (!key) { return; //キーが空の場合は終了する} 配列を取得します。 フォーカスを次に移動(flg); } 関数 focusNext(flg) { if (newflag == 0){//新しい検索の場合、インデックスはクリアされます index0 = 0; } もし(!flg){ if (oldCount0 != 0){//まだ検索中の場合 if (index0 < oldCount0){//左側が終了していない場合は左に移動します focusMove(index0); インデックス0++; } else if (index0 == oldCount0){//すべて完了 index0 = 0; フォーカスを移動します(インデックス0); インデックス0++; } それ以外 { index0 = 0; //未確認 focusMove(index0); インデックス0++; } } } それ以外 { if (oldCount0 != 0){//まだ検索中の場合 if (index0 <= oldCount0 && index0 > 0){//左側が終了していない場合は、左の index0 に進みます --; フォーカスを移動します(インデックス0); } else if (index0 == 0){//すべて完了 index0 = oldCount0; インデックス0-- フォーカスを移動します(インデックス0); } } } } 関数 getArray() { 新しいフラグ = 1; $(".contrast .result").removeClass("res"); var key = $("#key").val(); //キー値を取得するif (!key) { 古いキー0 = ""; return; //キーが空の場合は終了する} if (oldKey0 != キー || $(".current").length != 現在の長さ) { //インデックス0を0にリセットします。 var インデックス = 0; $(".contrast .result").each(関数() { $(this).replaceWith($(this).html()); }); pos0 = 新しい配列(); $(".contrast-wrap").hasClass("current") の場合 { 現在の長さ = $(".current").length; $(".current .contrast").each(function() { $(this).html($(this).html().replace(new RegExp(key, "gm"), "<span id='result" + (index++) + "' class='result'>" + key + "</span>")); // 置換 }); } それ以外 { $(".contrast-wrap").addClass('current'); 現在の長さ = $(".current").length; $(".contrast").each(関数() { $(this).html($(this).html().replace(new RegExp(key, "gm"), "<span id='result" + (index++) + "' class='result'>" + key + "</span>")); // 置換 }); } //$("#key").val(キー); oldKey0 = キー; //$(".contrast.result").each(関数() { // $(this).parents('.contrast-wrap').addClass('current'); // pos0.push($(this).offset().top); // //); // pos0.push($(".contrast .result:eq(2)").offset().top - $(".contrast .result:eq(2)").parents(".contrast").offset().top); oldCount0 = $(".contrast.result").length; 新しいフラグ = 0; } } 関数 focusMove(index0) { $(".contrast .result:eq(" + index0 + ")").parents('.contrast-wrap').addClass('current'); $(".contrast .result:eq(" + index0 + ")").addClass("res"); var top = $(".contrast .result:eq(" + index0 + ")").offset().top + $(".contrast .result:eq(" + index0 + ")").parents(".contrast").scrollTop(); var intop = top - $(".contrast .result:eq(" + index0 + ")").parents(".contrast").offset().top; $(".contrast .result:eq(" + index0 + ")").parents(".contrast").animate({ scrollTop: intop }, 200); ($(".contrast .result:eq(" + index0 + ")").parents(".contrast").scrollTop() == 0) の場合 { $("html, body").animate({ scrollTop: top - 200 }, 200); } それ以外 { $("html, body").animate({ scrollTop: $(".contrast .result:eq(" + index0 + ")").parents(".contrast").offset().top - 200 }, 200); } } $('#key').change(関数() { ($('#key').val() == "") の場合 { インデックス0 = 0; $(".contrast .result").each(関数() { $(this).replaceWith($(this).html()); }); 古いキー0 = ""; } }); </スクリプト> 次に、実装の原則を思い出しましょう。 まず、前回のクエリの結果をクリアします。次に、key の値に応じて、正規表現を使用して、領域内のすべての一致する文字に特別なスタイルを追加します。たとえば、クラス名が result の span タグがメソッドに追加されます。odKey0 変数は、key の値を記録するために使用されます (次回、最初に比較します。同じ場合は、次または前のコンテンツを表示することを意味し、正規表現を入力して一致させる必要はありません)、oldCount0 はクエリの合計数を記録し、newflag は 0 に設定されます (最初のクエリでない場合は、newflag は 1 になります)。 次に、getNext メソッドを入力します。flg は、ユーザーが前のボタンまたは次のボタンを押したかどうかを示します。Index0 は、現在表示されている一致する文字を記録するために使用されます。oldCount0 と比較され、増加または減少するか、0 に設定するかが決定されます (oldCount0 より大きいか 0 より小さい場合は、最初からやり直します)。 focusMove メソッドは、ページを現在の要素に配置するために使用されます。 学習した jQuery メソッド: eq() セレクター: セレクターは指定されたインデックス値を持つ要素を選択します。たとえば、 parents() メソッド: 要素のすべての親要素。 replace() メソッド: 選択した要素を指定された HTML コンテンツに置き換えます。選択した要素の要素も置き換えられることに注意してください。 offset() メソッド: ドキュメントに対する一致した要素のオフセット (位置) を返すか設定します。 scrollTop() メソッド: 一致した要素のスクロール バーの垂直位置を返すか設定します。 要約する 上記は、HTML ページの検索機能についての編集者による紹介です。皆様のお役に立てれば幸いです。ご質問がございましたら、メッセージを残していただければ、すぐに返信いたします。また、123WORDPRESS.COM ウェブサイトをサポートしてくださっている皆様にも感謝申し上げます。 |
<<: フロントエンドネットワーク、JavaScriptの最適化、開発のヒントについて簡単に説明します。
>>: Linux で Hadoop クラスターをインストールするための詳細な手順
目次1. コンポーネント化とは何ですか? 2. 基本的な使い方序文:場合によっては、HTML 構造化...
ネットサーフィンをしていると、私の注意を引こうとする美しいグラフィックでいっぱいの Web サイトを...
ウェブサイトを見るというのは、実は美しい女性を評価するようなものです。見た目を見るとき、私たちは見た...
ギリシャ文字は、特に数学や物理学などの科学技術分野で非常によく使用される記号列であり、特定の意味を持...
目次1. 開発環境から本番環境への移行2. 統一されたリクエストパスを設定する3. パッケージ化コマ...
JavaScript ネイティブ コードの記述能力を高め、setTimeout() の使用を強化する...
1. Spring Boot は jsp jar パッケージをサポートしていません。jsp は wa...
インストールと設定Apacheの公式ウェブサイトには多くのミラーダウンロードアドレスが用意されており...
序文nginx はマルチプロセス モデルを使用します。リクエストが届くと、システムはプロセスをロック...
年末なので仕事も少なくなっています。私が何もせずにいるのを見ると、上司はきっと不快に思うでしょう。そ...
Samba サービスでも NFS サービスでも、サーバーの起動時にリモート共有リソースが自動的にマ...
<br />通常、HTML では次の方法で DOCTYPE を宣言します。 <!D...
キャンバスを使用して、参照用の影付きのグラフィックとテキストを作成します。具体的な内容は次のとおりで...
目次Dockerとは展開する1. イメージをプルする2. 画像を表示する3. コンテナを実行する4....
Linuxで環境変数を削除するには?unsetコマンドを使用してすぐに削除します1. Linuxクラ...