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

bugfix> javascript > 投稿 2020-08-22 18:16

私のレイアウトには多くのチャートとカードがあり、ページが読み込まれたときにフィルターボタンをクリックする前にそれらを見たくない、私がやっている方法は表示をなしに設定し、フィルターを押すと表示する、それはうまく動作しますが、私は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");
});

javascript

回答 4 件

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

Trends

bugfix

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

javascript

関連記事