私のレイアウトには多くのチャートとカードがあり、ページが読み込まれたときにフィルターボタンをクリックする前にそれらを見たくない、私がやっている方法は表示をなしに設定し、フィルターを押すと表示する、それはうまく動作しますが、私はjsとcssの初心者なので、それを管理するより良い方法があるかどうか疑問に思っていました、
<div id="gridID" class="card chartsGridhights" style="width:49%;float:left;display:none">
<div id="pieChartID" class="card" style="float:left;width:20%;display:none">
<div id="faultStatChartID" class="card" style="width:55%;float:right;margin-right:2%;display:none;">
<div id="btnCurrentStatID" class="card" style="float:right;width:20%;height:350px;display:none;">
JavaScriptで:
$("#btnFilter").click(function() {
$("#btnCurrentStatID").css("display", "block");
$("#faultStatChartID").css("display", "block");
$("#pieChartID").css("display", "block");
$("#gridID").css("display", "block");
});
回答 4 件
IDで隠すのではなく、クラスで隠すことができます。この場合、新しいIDがあるたびに書き込み/更新する必要はありません。だから、例えば
<div id="gridID" class="card chartsGridhights someidentifier" style="width:49%;float:left;display:none"> <div id="gridID" class="card chartsGridhights someidentifier" style="width:49%;float:left;display:none">
その後、単にsomeidentifierまたはsomeotheridentifier $( '。someidentifier')......に非表示と表示を適用できます。
また、インラインスタイルを使用しているようです-インラインスタイルを避けることをお勧めします。
最後に、Shuffle、SortableなどのjQueryプラグインを使用できます。jQueryフィルタープラグインを検索するだけで、選択可能なリスト全体が表示されます。
ほとんどのプラグインには、直面する可能性のある問題について議論できるフォーラムがあります。
ページサイズが大きくなるため、インラインスタイルの使用は避けてください。
inline display: none
を削除.hide
を追加します すべてのdiv
のクラス ボタンをクリックすると削除されますCSS
.hide {display: none}
HTML
<div id="gridID" class="hide card chartsGridhights" style="width:49%;float:left"> <div id="pieChartID" class="hide card" style="float:left;width:20%"> <div id="faultStatChartID" class="hide card" style="width:55%;float:right;margin-right:2%;"> <div id="btnCurrentStatID" class="hide card" style="float:right;width:20%;height:350px;">
JQuery
$("#btnFilter").click(function () { $("div").removeClass("hide"); });
以下のスクリプトを使用
$("#btnFilter").click(function() { $(".card").hide(); $("SHOWCLASSID").show(); });
関連記事
- JavaScriptを使用して複数の選択ボックスを動的にロードする
- ループを使用せずに複数回印刷するにはどうすればよいですか?
- jQueryまたはJavaScriptを使用して配列からデータを抽出します
- 複数のコンビネータを使用してjQueryでcssを設定する方法
- jQuery val()を使用してフォームデータを送信し、FormDataを使用してデータを送信する
- Nodejsでaxiosを使用した複数のgetリクエスト
- jQueryを使用して入力フィールドに「list」属性を追加するにはどうすればよいですか?
- 柔軟性を維持するために、幅のフレーム修飾子を使用せずに、複数列リストの1列を同じ幅にする方法
- RxJs forkJoinを使用して、複数のAPI呼び出しを単一の出力配列にマージします
- jQueryAJAX呼び出しがクリックハンドラー内で複数回起動される
.hideShow
などのクラスを使用します HTMLで表示または非表示にする要素内。コードを次のように変更します。HTML
JQUERY
class
を使用する セレクターは、id
を使用する場合と比較して、より柔軟性があり、多数のコードを削減します。 あなたの場合の表示ブロックのセレクター。