最近、多くの人が修正したフレームワークに取り組んでいて、毎日コードを見るとめまいを感じますが、バックエンドと構成可能なフロントエンドが作成できたことを実感しています。 2 つのライブラリの異なるデータ範囲を確認できました。非常に満足したので、その日はそれを共有するために取り出しました。今日は、ここ数日間取り組んでいた機能について説明します。 htmlページ。
この機能は主に、検索ボックスに文字を入力し、「前へ」ボタンと「次へ」ボタンを押すと、クエリ領域内の一致する文字が特別なスタイルで自動的にマークされます。その後、「前へ」ボタンと「次へ」ボタンを押し続けると、次の操作を行うことができます。順番に参照して文字を照合し、別のパターンを使用して、現在一致している文字を他の一致文字と区別します。
フロントエンドの表示はおそらく次のようになります。
htmlは次のようになります。
<div class=container style=z-index: 999 id=searchDiv> <div class=keyword-search> 検索: <input id=key type=text style=width: 200px; <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 newflag = 0; var currentLength = 0; var key = $(#key).val() ; //キーの値を取得します if (!key) { return; // キーが空の場合は終了します} getArray() } function focusNext(flg); (newflag == 0) {//新しい検索がある場合、インデックスはクリアされます。index0 = 0; } if (!flg) { if (oldCount0 != 0) {//まだ検索がある場合 if (index0 < oldCount0) {// 左側の歩行が終了していない場合は、左側に進みます focusMove(index0);index0++ } else if (index0 == oldCount0) {//終了しましたindex0 = 0; ); index0++; } else {index0 = 0;//未定 focusMove(index0); } } } else { if (oldCount0 != 0) {//まだ検索がある場合 if (index0 <= oldCount0 && index0 > 0) {//まだ左側の歩行が完了していない場合は、左側に移動します。index0--; focusMove(index0) } else if (index0 == 0) {//完了しました。 oldCount0--focusMove(index0); } } } 関数 getArray() { $(.contrast .result).removeClass(res); /キーの値を取得 if (!key) { oldKey0 = ; //キーが空の場合は終了} if (oldKey0 != key || $(.current).length != currentLength) { //インデックス 0 = 0 をリセットします; var インデックス = 0; $(.contrast .result).each(function () { $(this).replaceWith($(this).html()); } ) ; pos0 = 新しい Array(); if ($(.contrast-wrap).hasClass(current)) { currentLength = $(.current).length; .contrast).each(function () { $(this).html($(this).html().replace(new RegExp(key, gm), <span id='result + (index++) + ' class= 'result'> + key + </span>)); // 置換 }) } else { $(.contrast-wrap).addClass('currentLength'); $(.current).length; $(.contrast).each(function () { $(this).html($(this).html().replace(new RegExp(key, gm), <span id= 'result + (index++) + ' class='result'> + key + </span>)); // 置換 }) } //$(#key).val(key); //$(.contrast .result).each(function () { // $(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 } } function focusMove(index0); .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 = トップ - $(.contrast .result:eq( +index0 + )).parents(.contrast).offset().top; $(.contrast .result:eq( +index0 + )).parents(.contrast).animate({scrollTop: intop }, 200); if ($(.contrast .result:eq( +index0 + )).parents(.contrast).scrollTop() == 0) { $(html, body).animate({ スクロールトップ: トップ - 200 }, 200) } else { $(html, body).animate({スクロールトップ: $(.contrast .result:eq( +index0 + )).parents(.contrast).offset().top - 200 $('#key').change(function () { if ($('#key').val() == ) {index0 = 0; $(.contrast .result). each(関数 () { $(this).replaceWith($(this).html()); });次に、実装原則を思い出してください。まず、最後のクエリ結果をクリアし、次に正規表現を使用して、キー値に基づいて、領域内のすべての一致する文字に特別なスタイルを追加します。たとえば、クラス名が result である span タグがメソッドに追加されます。 odKey0 変数を使用してキーの値を記録します(次回入力するときに最初に比較します。同じであれば、次または前のコンテンツを参照する必要があることを意味するため、入力時に正規表現一致を使用する必要はありません) oldCount0 はクエリの合計数を記録します。 、 newflag は 0 に設定されます (初めてではない場合、クエリ newflag は 1)。
次に、getNext メソッドを入力します。flg は、ユーザーが前または次のボタンを押したかどうかを示します。index0 を使用して、現在表示されている一致する文字を記録します。oldCount0 と比較して、増加するか減少するか、0 に設定されるかを決定します。 oldCount0 または 0 未満の場合は、最初からやり直す必要があります)。
focusMove メソッドは、ページを現在の要素に配置する操作です。
学んだjqueryメソッド: eq() セレクター: セレクターは、指定されたインデックス値を持つ要素を選択します。例: $(.contrast .result:eq(1))は、クラス名がcontrastである要素内のresultという名前の2番目の要素を選択します。
parents() メソッド: 要素のすべての親要素。 $(p).parents('.contrast-wrap') 、 p 要素のcontrast-wrapという名前のすべての要素。
replace() メソッド: 選択した要素を指定した HTML コンテンツに置き換えます。選択した要素の要素も置き換えられることに注意してください。
offset() メソッド: ドキュメントに対する一致する要素のオフセット (位置) を返すか、設定します。
scrollTop() メソッド: 一致する要素のスクロール バーの垂直位置を返すか、設定します。
要約する上記は、編集者が紹介する HTML ページ内の検索機能です。ご質問があれば、メッセージを残してください。編集者がすぐに返信します。また、VeVb武道サイトを応援してくださった皆様、誠にありがとうございました！