jqueryを使用して複数のdivとセクションを非表示および表示する方法

.hideShow などのクラスを使用します  HTMLで表示または非表示にする要素内。コードを次のように変更します。

HTML

<div id="gridID" class="card chartsGridhights hideShow" style="width:49%;float:left;display:none">
  <div id="pieChartID" class="card hideShow" style="float:left;width:20%;display:none">
  <div id="faultStatChartID" class="card hideShow" style="width:55%;float:right;margin-right:2%;display:none;">
  <div id="btnCurrentStatID" class="card hideShow" style="float:right;width:20%;height:350px;display:none;">

JQUERY

$("#btnFilter").click(function () {          
     $(".hideShow").css("display", "block");
     //or $(".hideShow").show();
});

class を使用する  セレクターは、 id を使用する場合と比較して、より柔軟性があり、多数のコードを削減します。  あなたの場合の表示ブロックのセレクター。

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();
});