Question

我有很多图表和卡片，在我的布局中，当页面加载时我不想在点击我的过滤器按钮之前看到它们，我正在做的方式是我将它们的显示设置为无，当我按下过滤器时我告诉他们，它工作正常，但由于我是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");
});

Answer 1

在要隐藏的元素中使用类{，例如.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选择器更灵活，减少了大量代码。

Answer 2

使用以下脚本

$("#btnFilter").click(function() {
    $(".card").hide();
    $("SHOWCLASSID").show();
});

Answer 3

不是通过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 $（＆＃39; .someidentifier＆＃39;）......

另外，我发现你使用的是内联样式 - 最好避免使用内联样式。

最后 - 您可以使用像Shuffle，Sortable等jQuery插件...只需搜索jQuery过滤器插件，您将看到一个完整的列表供您选择。

大多数插件都有一个论坛，您可以在其中讨论您可能遇到的任何问题。

Answer 4

避免使用内联样式，因为它会增加页面大小。删除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");
});

如何使用jquery管理hide并显示多个div和section

4 个答案: