如何正确过滤卡引导 HTMLDivElement？

【问题标题】：How can I filter the card bootstrap HTMLDivElement properly?如何正确过滤卡引导 HTMLDivElement？
【发布时间】：2019-11-08 14:05:31
【问题描述】：

我正在创建一个过滤功能。使用此功能，我们想要过滤应用程序卡片，但我无法正确显示元素。该功能不显示过滤后的卡片、按钮、图片或文本的一部分。我知道通过在 .filter 函数中放置“#myDIV *”，它将搜索所有元素，即使知道这一点，我也没有找到正确的方法。 有人可以帮帮我吗？

我已尝试使用以下代码：

        $(document).ready(function () {
            $("#myInput").on("keyup", function () {
                var value = $(this).val().toLowerCase();    
                $("#myDIV *").filter(function () {
                    if ($(this).text().toLowerCase() != "abrir") {
                        $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
                    }
                });
            });
        });
.row {
  background: #f8f9fa;
  margin-top: 20px;
}

.col {
  border: solid 1px #6c757d;
  padding: 10px;
}
<!DOCTYPE html>
<html dir="ltr" lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- Tell the browser to be responsive to screen width -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    <!-- Favicon icon -->
    <link rel="icon" type="image/png" sizes="16x16" href="/assets/images/favicon.png">
    <title>SGR - Desktop</title>
    <!-- Custom CSS -->
    <!-- Custom CSS -->
    <link href="/assets/css/font-awesome.css" rel="stylesheet" />
    <link href="/assets/libs/toastr/build/toastr.min.css" rel="stylesheet">
    <link href="/assets/libs/select2/dist/css/select2.min.css" rel="stylesheet">
    <link href="/dist/css/style.min.css" rel="stylesheet">
    <link href="/dist/css/core.css" rel="stylesheet">

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
        <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>

<body>
    <!-- ============================================================== -->
    <!-- Preloader - style you can find in spinners.css -->
    <!-- ============================================================== -->
    <div class="preloader">
        <div class="lds-ripple">
            <div class="lds-pos"></div>
            <div class="lds-pos"></div>
        </div>
    </div>
    <div id="main-wrapper">
        <div class="page-wrapper">
            <div class="page-breadcrumb">
                <div class="row">
                    <div class="col-12 d-flex no-block align-items-center">
                        


    <div class="header-title">
        <h1>
            Home
                    <small>
                        <i class="fa fa-angle-right"></i>
                        Desktop
                    </small>
        </h1>
    </div>

                    </div>
                </div>
            </div>
            <div class="container-fluid">
                

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<style>
</style>
<input class="form-control col-md-3 col-sm-4 col-xs-6" id="myInput" type="text" placeholder="Search..">
<br />
<br />
<div class="container">
    <div  id="myDIV"  class="row">

                <div class="col-md-3 col-sm-4 col-xs-6">
                        <div class="card" id="emulador project64">
                            <img class="card-img-top" src="">
                            <div class="card-body">
                                <h5 class="card-title">emulador project64</h5>
                                <p class="card-text">project64.exe</p>
                                <a href="project64.exe" target="_blank" class="btn btn-secondary">Abrir</a>
                            </div>
                        </div>


                </div>
                <div class="col-md-3 col-sm-4 col-xs-6">
                        <div class="card" id="overwatch">
                            <img class="card-img-top" src="">
                            <div class="card-body">
                                <h5 class="card-title">overwatch</h5>
                                <p class="card-text">overwatch.exe</p>
                                <a href="overwatch.exe" target="_blank" class="btn btn-secondary">Abrir</a>
                            </div>
                        </div>


                </div>
                <div class="col-md-3 col-sm-4 col-xs-6">
                        <div class="card" id="YouTube">
                            <img class="card-img-top" src="../../assets/images/YouTube.png">
                            <div class="card-body">
                                <h5 class="card-title">YouTube</h5>
                                <p class="card-text">Google Inc.</p>
                                <a href="https://www.youtube.com/" target="_blank" class="btn btn-secondary">Abrir</a>
                            </div>
                        </div>


                </div>
                <div class="col-md-3 col-sm-4 col-xs-6">
                        <div class="card" id="Canal de Denuncias">
                            <img class="card-img-top" src="">
                            <div class="card-body">
                                <h5 class="card-title">Canal de Denuncias</h5>
                                <p class="card-text">https://www.canaldedenuncia.cl/cda/metro/cdpages/Inicio.aspx</p>
                                <a href="https://www.canaldedenuncia.cl/cda/metro/cdpages/Inicio.aspx" target="_blank" class="btn btn-secondary">Abrir</a>
                            </div>
                        </div>


                </div>
                <div class="col-md-3 col-sm-4 col-xs-6">
                        <div class="card" id="Cipher">
                            <img class="card-img-top" src="">
                            <div class="card-body">
                                <h5 class="card-title">Cipher</h5>
                                <p class="card-text">www.cipher.cl</p>
                                <a href="www.cipher.cl" target="_blank" class="btn btn-secondary">Abrir</a>
                            </div>
                        </div>


                </div>
                <div class="col-md-3 col-sm-4 col-xs-6">
                        <div class="card" id="Terraria">
                            <img class="card-img-top" src="">
                            <div class="card-body">
                                <h5 class="card-title">Terraria</h5>
                                <p class="card-text">shared/terraria.exe</p>
                                <a href="shared/terraria.exe" target="_blank" class="btn btn-secondary">Abrir</a>
                            </div>
                        </div>


                </div>
                <div class="col-md-3 col-sm-4 col-xs-6">
                        <div class="card" id="Revista And&#233;n">
                            <img class="card-img-top" src="">
                            <div class="card-body">
                                <h5 class="card-title">Revista And&#233;n</h5>
                                <p class="card-text">http://nt25_intranet/archivos/revistas/2017-03/revista.pdf</p>
                                <a href="http://nt25_intranet/archivos/revistas/2017-03/revista.pdf" target="_blank" class="btn btn-secondary">Abrir</a>
                            </div>
                        </div>


                </div>
                <div class="col-md-3 col-sm-4 col-xs-6">
                        <div class="card" id="Smov2">
                            <img class="card-img-top" src="">
                            <div class="card-body">
                                <h5 class="card-title">Smov2</h5>
                                <p class="card-text">\\NT1_METRO\Aplicacion\Operaciones\smov2\SMOV 2.exe</p>
                                <a href="\\NT1_METRO\Aplicacion\Operaciones\smov2\SMOV 2.exe" target="_blank" class="btn btn-secondary">Abrir</a>
                            </div>
                        </div>


                </div>
                <div class="col-md-3 col-sm-4 col-xs-6">
                        <div class="card" id="Concursos internos">
                            <img class="card-img-top" src="">
                            <div class="card-body">
                                <h5 class="card-title">Concursos internos</h5>
                                <p class="card-text">https://metro.openagora.cl/</p>
                                <a href="https://metro.openagora.cl/" target="_blank" class="btn btn-secondary">Abrir</a>
                            </div>
                        </div>


                </div>
                <div class="col-md-3 col-sm-4 col-xs-6">
                        <div class="card" id="The Clinic">
                            <img class="card-img-top" src="">
                            <div class="card-body">
                                <h5 class="card-title">The Clinic</h5>
                                <p class="card-text">www.theclinic.cl</p>
                                <a href="www.theclinic.cl" target="_blank" class="btn btn-secondary">Abrir</a>
                            </div>
                        </div>


                </div>
                <div class="col-md-3 col-sm-4 col-xs-6">
                        <div class="card" id="Hotmail">
                            <img class="card-img-top" src="">
                            <div class="card-body">
                                <h5 class="card-title">Hotmail</h5>
                                <p class="card-text">http://www.hotmail.com</p>
                                <a href="http://www.hotmail.com" target="_blank" class="btn btn-secondary">Abrir</a>
                            </div>
                        </div>


                </div>
                <div class="col-md-3 col-sm-4 col-xs-6">
                        <div class="card" id="Gmail">
                            <img class="card-img-top" src="">
                            <div class="card-body">
                                <h5 class="card-title">Gmail</h5>
                                <p class="card-text">http://www.gmail.com</p>
                                <a href="http://www.gmail.com" target="_blank" class="btn btn-secondary">Abrir</a>
                            </div>
                        </div>


                </div>
                <div class="col-md-3 col-sm-4 col-xs-6">
                        <div class="card" id="CNN">
                            <img class="card-img-top" src="">
                            <div class="card-body">
                                <h5 class="card-title">CNN</h5>
                                <p class="card-text">www.cnn.org</p>
                                <a href="www.cnn.org" target="_blank" class="btn btn-secondary">Abrir</a>
                            </div>
                        </div>


                </div>
                <div class="col-md-3 col-sm-4 col-xs-6">
                        <div class="card" id="Metro Familia">
                            <img class="card-img-top" src="">
                            <div class="card-body">
                                <h5 class="card-title">Metro Familia</h5>
                                <p class="card-text">http://andensocial.metro.cl/aplicaciones-generales/metro-en-familia</p>
                                <a href="http://andensocial.metro.cl/aplicaciones-generales/metro-en-familia" target="_blank" class="btn btn-secondary">Abrir</a>
                            </div>
                        </div>


                </div>
                <div class="col-md-3 col-sm-4 col-xs-6">
                        <div class="card" id="League of Legends">
                            <img class="card-img-top" src="">
                            <div class="card-body">
                                <h5 class="card-title">League of Legends</h5>
                                <p class="card-text">lollauncher.exe</p>
                                <a href="lollauncher.exe" target="_blank" class="btn btn-secondary">Abrir</a>
                            </div>
                        </div>


                </div>
                <div class="col-md-3 col-sm-4 col-xs-6">
                        <div class="card" id="Minecraft Java Edition">
                            <img class="card-img-top" src="">
                            <div class="card-body">
                                <h5 class="card-title">Minecraft Java Edition</h5>
                                <p class="card-text">minecraft.exe</p>
                                <a href="minecraft.exe" target="_blank" class="btn btn-secondary">Abrir</a>
                            </div>
                        </div>


                </div>
                <div class="col-md-3 col-sm-4 col-xs-6">
                        <div class="card" id="Webmail Metro">
                            <img class="card-img-top" src="">
                            <div class="card-body">
                                <h5 class="card-title">Webmail Metro</h5>
                                <p class="card-text">https://mail.metro.cl/owa/auth/logon.aspx?replaceCurrent=1&amp;url=https%3a%2f%2fmail.metro.cl%2fowa%2f</p>
                                <a href="https://mail.metro.cl/owa/auth/logon.aspx?replaceCurrent=1&amp;url=https%3a%2f%2fmail.metro.cl%2fowa%2f" target="_blank" class="btn btn-secondary">Abrir</a>
                            </div>
                        </div>


                </div>
                <div class="col-md-3 col-sm-4 col-xs-6">
                        <div class="card" id="Autoconsulta ESS">
                            <img class="card-img-top" src="">
                            <div class="card-body">
                                <h5 class="card-title">Autoconsulta ESS</h5>
                                <p class="card-text">http://172.16.20.60:84/sse_generico/espanol/generico_login.jsp?estado=0</p>
                                <a href="http://172.16.20.60:84/sse_generico/espanol/generico_login.jsp?estado=0" target="_blank" class="btn btn-secondary">Abrir</a>
                            </div>
                        </div>


                </div>
                <div class="col-md-3 col-sm-4 col-xs-6">
                        <div class="card" id="And&#233;n Social">
                            <img class="card-img-top" src="">
                            <div class="card-body">
                                <h5 class="card-title">And&#233;n Social</h5>
                                <p class="card-text">http://andensocial.metro.cl</p>
                                <a href="http://andensocial.metro.cl" target="_blank" class="btn btn-secondary">Abrir</a>
                            </div>
                        </div>


                </div>
                <div class="col-md-3 col-sm-4 col-xs-6">
                        <div class="card" id="Sitio Conductores">
                            <img class="card-img-top" src="">
                            <div class="card-body">
                                <h5 class="card-title">Sitio Conductores</h5>
                                <p class="card-text">http://operaciones.metrosantiago.cl/</p>
                                <a href="http://operaciones.metrosantiago.cl/" target="_blank" class="btn btn-secondary">Abrir</a>
                            </div>
                        </div>


                </div>
    </div>
</div>



            </div>
            <footer class="footer text-center">
<div class="modal" id="loginModal"><div class="modal-dialog modal-lg"><div class="modal-content">                    <div id="login"></div>
</div></div></div>                
            </footer>
        </div>
    </div>
    <script src="/assets/libs/jquery/dist/jquery.min.js"></script>
    <!-- Bootstrap tether Core JavaScript -->
    <script src="/assets/libs/popper.js/dist/umd/popper.min.js"></script>
    <script src="/assets/libs/bootstrap/dist/js/bootstrap.min.js"></script>
    <script src="/assets/libs/perfect-scrollbar/dist/perfect-scrollbar.jquery.min.js"></script>
    <script src="/assets/extra-libs/sparkline/sparkline.js"></script>
    <!--Wave Effects -->
    <script src="/dist/js/waves.js"></script>
    <!--Menu sidebar -->
    <script src="/dist/js/sidebarmenu.js"></script>
    <!--Custom JavaScript -->
    <script src="/dist/js/custom.min.js"></script>
    <script src="/dist/js/core.js"></script>
    <script src="/assets/libs/toastr/build/toastr.min.js"></script>
    <script src="/assets/libs/select2/dist/js/select2.full.min.js"></script>
    <script src="/assets/libs/select2/dist/js/select2.min.js"></script>
    <script src="/assets/libs/jquery-validation/dist/jquery.validate.min.js"></script>
    <script src="/assets/libs/bootbox/bootbox.js"></script>

    <!--This page JavaScript -->
    <!-- <script src="~/dist/js/pages/dashboards/dashboard1.js"></script> -->
    <!-- Charts js Files -->

    <!--Success Modal Templates-->
<div class="modal fade modal-message modal-success" id="modal-success"><div class="modal-dialog"><div class="modal-content"><div class="modal-header">        <i class="far fa-check-circle"></i>
</div><div class="modal-title">        Correcto
</div><div class="modal-body">        La solicitud se efectuó con éxito
</div><div class="modal-footer"><button class="btn btn-success " data-dismiss="modal" type="button">Aceptar</button></div></div></div></div>
<!--End Success Modal Templates-->
<!--Info Modal Templates-->
<div class="modal fade modal-message modal-info" id="modal-info"><div class="modal-dialog"><div class="modal-content"><div class="modal-header">        <i class="fa fa-envelope"></i>
</div><div class="modal-title">        Información
</div><div class="modal-body">        Se le notifica información importante
</div><div class="modal-footer"><button class="btn btn-info " data-dismiss="modal" type="button">Ok</button></div></div></div></div><!--End Info Modal Templates-->
<!--Danger Modal Templates-->
<div class="modal fade modal-message modal-danger" id="modal-danger"><div class="modal-dialog"><div class="modal-content"><div class="modal-header">        <i class="glyphicon glyphicon-fire"></i>
</div><div class="modal-title">        Error
</div><div class="modal-body">        Se ha producido un error
</div><div class="modal-footer"><button class="btn btn-danger " data-dismiss="modal" type="button">Ok</button></div></div></div></div><!--End Danger Modal Templates-->
<!--Warning Modal Templates-->
<div class="modal fade modal-message modal-warning" id="modal-warning"><div class="modal-dialog"><div class="modal-content"><div class="modal-header">        <i class="fa fa-warning"></i>
</div><div class="modal-title">        Alerta
</div><div class="modal-body">        Algo ha salido mal
</div><div class="modal-footer"><button class="btn btn-warning " data-dismiss="modal" type="button">Ok</button></div></div></div></div><!--End Warning Modal Templates-->
<!--Confirm Modal Templates-->
<div id="core_modalconfirmdialog" style="display:none;">
    <div class="row">
        <div class="col-md-12">
            <div class="modal-header">
                <i class="fa fa-warning"></i>
            </div>
            <div class="modal-body">
                Mensaje
            </div>
            <div class="modal-body">
                Mensaje que iría en el centro
            </div>
        </div>
    </div>
</div>
<!--Confirm Modal Templates-->


</body>

</html>

【问题讨论】：

    标签： javascript html filter toggle


    【解决方案1】：

    您可以在输入时先隐藏所有卡片，然后仅显示基于搜索查询的卡片。为了稍微简化过滤器，您也可以使用includes。

    $(document).ready(function() {
  $("#myInput").on("keyup", function() {
    var value = $(this).val().toLowerCase();

    $("div[class^=col]")
      .hide()
      .filter(function() {
        var cardTitle = $(this).find('.card-title').text().toLowerCase();

        return cardTitle.includes(value);
      })
      .show();
  });
});
    .row {
  background: #f8f9fa;
  margin-top: 20px;
}

.col {
  border: solid 1px #6c757d;
  padding: 10px;
}
    <!DOCTYPE html>
<html dir="ltr" lang="en">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <!-- Tell the browser to be responsive to screen width -->
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="description" content="">
  <meta name="author" content="">
  <!-- Favicon icon -->
  <link rel="icon" type="image/png" sizes="16x16" href="/assets/images/favicon.png">
  <title>SGR - Desktop</title>
  <!-- Custom CSS -->
  <!-- Custom CSS -->
  <link href="/assets/css/font-awesome.css" rel="stylesheet" />
  <link href="/assets/libs/toastr/build/toastr.min.css" rel="stylesheet">
  <link href="/assets/libs/select2/dist/css/select2.min.css" rel="stylesheet">
  <link href="/dist/css/style.min.css" rel="stylesheet">
  <link href="/dist/css/core.css" rel="stylesheet">

  <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
  <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
  <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
        <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>

<body>
  <!-- ============================================================== -->
  <!-- Preloader - style you can find in spinners.css -->
  <!-- ============================================================== -->
  <div class="preloader">
    <div class="lds-ripple">
      <div class="lds-pos"></div>
      <div class="lds-pos"></div>
    </div>
  </div>
  <div id="main-wrapper">
    <div class="page-wrapper">
      <div class="page-breadcrumb">
        <div class="row">
          <div class="col-12 d-flex no-block align-items-center">



            <div class="header-title">
              <h1>
                Home
                <small>
                        <i class="fa fa-angle-right"></i>
                        Desktop
                    </small>
              </h1>
            </div>

          </div>
        </div>
      </div>
      <div class="container-fluid">


        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
        <style>

        </style>
        <input class="form-control col-md-3 col-sm-4 col-xs-6" id="myInput" type="text" placeholder="Search..">
        <br />
        <br />
        <div class="container">
          <div id="myDIV" class="row">

            <div class="col-md-3 col-sm-4 col-xs-6">
              <div class="card" id="emulador project64">
                <img class="card-img-top" src="">
                <div class="card-body">
                  <h5 class="card-title">emulador project64</h5>
                  <p class="card-text">project64.exe</p>
                  <a href="project64.exe" target="_blank" class="btn btn-secondary">Abrir</a>
                </div>
              </div>


            </div>
            <div class="col-md-3 col-sm-4 col-xs-6">
              <div class="card" id="overwatch">
                <img class="card-img-top" src="">
                <div class="card-body">
                  <h5 class="card-title">overwatch</h5>
                  <p class="card-text">overwatch.exe</p>
                  <a href="overwatch.exe" target="_blank" class="btn btn-secondary">Abrir</a>
                </div>
              </div>


            </div>
            <div class="col-md-3 col-sm-4 col-xs-6">
              <div class="card" id="YouTube">
                <img class="card-img-top" src="../../assets/images/YouTube.png">
                <div class="card-body">
                  <h5 class="card-title">YouTube</h5>
                  <p class="card-text">Google Inc.</p>
                  <a href="https://www.youtube.com/" target="_blank" class="btn btn-secondary">Abrir</a>
                </div>
              </div>


            </div>
            <div class="col-md-3 col-sm-4 col-xs-6">
              <div class="card" id="Canal de Denuncias">
                <img class="card-img-top" src="">
                <div class="card-body">
                  <h5 class="card-title">Canal de Denuncias</h5>
                  <p class="card-text">https://www.canaldedenuncia.cl/cda/metro/cdpages/Inicio.aspx</p>
                  <a href="https://www.canaldedenuncia.cl/cda/metro/cdpages/Inicio.aspx" target="_blank" class="btn btn-secondary">Abrir</a>
                </div>
              </div>


            </div>
            <div class="col-md-3 col-sm-4 col-xs-6">
              <div class="card" id="Cipher">
                <img class="card-img-top" src="">
                <div class="card-body">
                  <h5 class="card-title">Cipher</h5>
                  <p class="card-text">www.cipher.cl</p>
                  <a href="www.cipher.cl" target="_blank" class="btn btn-secondary">Abrir</a>
                </div>
              </div>


            </div>
            <div class="col-md-3 col-sm-4 col-xs-6">
              <div class="card" id="Terraria">
                <img class="card-img-top" src="">
                <div class="card-body">
                  <h5 class="card-title">Terraria</h5>
                  <p class="card-text">shared/terraria.exe</p>
                  <a href="shared/terraria.exe" target="_blank" class="btn btn-secondary">Abrir</a>
                </div>
              </div>


            </div>
            <div class="col-md-3 col-sm-4 col-xs-6">
              <div class="card" id="Revista And&#233;n">
                <img class="card-img-top" src="">
                <div class="card-body">
                  <h5 class="card-title">Revista And&#233;n</h5>
                  <p class="card-text">http://nt25_intranet/archivos/revistas/2017-03/revista.pdf</p>
                  <a href="http://nt25_intranet/archivos/revistas/2017-03/revista.pdf" target="_blank" class="btn btn-secondary">Abrir</a>
                </div>
              </div>


            </div>
            <div class="col-md-3 col-sm-4 col-xs-6">
              <div class="card" id="Smov2">
                <img class="card-img-top" src="">
                <div class="card-body">
                  <h5 class="card-title">Smov2</h5>
                  <p class="card-text">\\NT1_METRO\Aplicacion\Operaciones\smov2\SMOV 2.exe</p>
                  <a href="\\NT1_METRO\Aplicacion\Operaciones\smov2\SMOV 2.exe" target="_blank" class="btn btn-secondary">Abrir</a>
                </div>
              </div>


            </div>
            <div class="col-md-3 col-sm-4 col-xs-6">
              <div class="card" id="Concursos internos">
                <img class="card-img-top" src="">
                <div class="card-body">
                  <h5 class="card-title">Concursos internos</h5>
                  <p class="card-text">https://metro.openagora.cl/</p>
                  <a href="https://metro.openagora.cl/" target="_blank" class="btn btn-secondary">Abrir</a>
                </div>
              </div>


            </div>
            <div class="col-md-3 col-sm-4 col-xs-6">
              <div class="card" id="The Clinic">
                <img class="card-img-top" src="">
                <div class="card-body">
                  <h5 class="card-title">The Clinic</h5>
                  <p class="card-text">www.theclinic.cl</p>
                  <a href="www.theclinic.cl" target="_blank" class="btn btn-secondary">Abrir</a>
                </div>
              </div>


            </div>
            <div class="col-md-3 col-sm-4 col-xs-6">
              <div class="card" id="Hotmail">
                <img class="card-img-top" src="">
                <div class="card-body">
                  <h5 class="card-title">Hotmail</h5>
                  <p class="card-text">http://www.hotmail.com</p>
                  <a href="http://www.hotmail.com" target="_blank" class="btn btn-secondary">Abrir</a>
                </div>
              </div>


            </div>
            <div class="col-md-3 col-sm-4 col-xs-6">
              <div class="card" id="Gmail">
                <img class="card-img-top" src="">
                <div class="card-body">
                  <h5 class="card-title">Gmail</h5>
                  <p class="card-text">http://www.gmail.com</p>
                  <a href="http://www.gmail.com" target="_blank" class="btn btn-secondary">Abrir</a>
                </div>
              </div>


            </div>
            <div class="col-md-3 col-sm-4 col-xs-6">
              <div class="card" id="CNN">
                <img class="card-img-top" src="">
                <div class="card-body">
                  <h5 class="card-title">CNN</h5>
                  <p class="card-text">www.cnn.org</p>
                  <a href="www.cnn.org" target="_blank" class="btn btn-secondary">Abrir</a>
                </div>
              </div>


            </div>
            <div class="col-md-3 col-sm-4 col-xs-6">
              <div class="card" id="Metro Familia">
                <img class="card-img-top" src="">
                <div class="card-body">
                  <h5 class="card-title">Metro Familia</h5>
                  <p class="card-text">http://andensocial.metro.cl/aplicaciones-generales/metro-en-familia</p>
                  <a href="http://andensocial.metro.cl/aplicaciones-generales/metro-en-familia" target="_blank" class="btn btn-secondary">Abrir</a>
                </div>
              </div>


            </div>
            <div class="col-md-3 col-sm-4 col-xs-6">
              <div class="card" id="League of Legends">
                <img class="card-img-top" src="">
                <div class="card-body">
                  <h5 class="card-title">League of Legends</h5>
                  <p class="card-text">lollauncher.exe</p>
                  <a href="lollauncher.exe" target="_blank" class="btn btn-secondary">Abrir</a>
                </div>
              </div>


            </div>
            <div class="col-md-3 col-sm-4 col-xs-6">
              <div class="card" id="Minecraft Java Edition">
                <img class="card-img-top" src="">
                <div class="card-body">
                  <h5 class="card-title">Minecraft Java Edition</h5>
                  <p class="card-text">minecraft.exe</p>
                  <a href="minecraft.exe" target="_blank" class="btn btn-secondary">Abrir</a>
                </div>
              </div>


            </div>
            <div class="col-md-3 col-sm-4 col-xs-6">
              <div class="card" id="Webmail Metro">
                <img class="card-img-top" src="">
                <div class="card-body">
                  <h5 class="card-title">Webmail Metro</h5>
                  <p class="card-text">https://mail.metro.cl/owa/auth/logon.aspx?replaceCurrent=1&amp;url=https%3a%2f%2fmail.metro.cl%2fowa%2f</p>
                  <a href="https://mail.metro.cl/owa/auth/logon.aspx?replaceCurrent=1&amp;url=https%3a%2f%2fmail.metro.cl%2fowa%2f" target="_blank" class="btn btn-secondary">Abrir</a>
                </div>
              </div>


            </div>
            <div class="col-md-3 col-sm-4 col-xs-6">
              <div class="card" id="Autoconsulta ESS">
                <img class="card-img-top" src="">
                <div class="card-body">
                  <h5 class="card-title">Autoconsulta ESS</h5>
                  <p class="card-text">http://172.16.20.60:84/sse_generico/espanol/generico_login.jsp?estado=0</p>
                  <a href="http://172.16.20.60:84/sse_generico/espanol/generico_login.jsp?estado=0" target="_blank" class="btn btn-secondary">Abrir</a>
                </div>
              </div>


            </div>
            <div class="col-md-3 col-sm-4 col-xs-6">
              <div class="card" id="And&#233;n Social">
                <img class="card-img-top" src="">
                <div class="card-body">
                  <h5 class="card-title">And&#233;n Social</h5>
                  <p class="card-text">http://andensocial.metro.cl</p>
                  <a href="http://andensocial.metro.cl" target="_blank" class="btn btn-secondary">Abrir</a>
                </div>
              </div>


            </div>
            <div class="col-md-3 col-sm-4 col-xs-6">
              <div class="card" id="Sitio Conductores">
                <img class="card-img-top" src="">
                <div class="card-body">
                  <h5 class="card-title">Sitio Conductores</h5>
                  <p class="card-text">http://operaciones.metrosantiago.cl/</p>
                  <a href="http://operaciones.metrosantiago.cl/" target="_blank" class="btn btn-secondary">Abrir</a>
                </div>
              </div>


            </div>
          </div>
        </div>



      </div>
      <footer class="footer text-center">
        <div class="modal" id="loginModal">
          <div class="modal-dialog modal-lg">
            <div class="modal-content">
              <div id="login"></div>
            </div>
          </div>
        </div>
      </footer>
    </div>
  </div>
  <script src="/assets/libs/jquery/dist/jquery.min.js"></script>
  <!-- Bootstrap tether Core JavaScript -->
  <script src="/assets/libs/popper.js/dist/umd/popper.min.js"></script>
  <script src="/assets/libs/bootstrap/dist/js/bootstrap.min.js"></script>
  <script src="/assets/libs/perfect-scrollbar/dist/perfect-scrollbar.jquery.min.js"></script>
  <script src="/assets/extra-libs/sparkline/sparkline.js"></script>
  <!--Wave Effects -->
  <script src="/dist/js/waves.js"></script>
  <!--Menu sidebar -->
  <script src="/dist/js/sidebarmenu.js"></script>
  <!--Custom JavaScript -->
  <script src="/dist/js/custom.min.js"></script>
  <script src="/dist/js/core.js"></script>
  <script src="/assets/libs/toastr/build/toastr.min.js"></script>
  <script src="/assets/libs/select2/dist/js/select2.full.min.js"></script>
  <script src="/assets/libs/select2/dist/js/select2.min.js"></script>
  <script src="/assets/libs/jquery-validation/dist/jquery.validate.min.js"></script>
  <script src="/assets/libs/bootbox/bootbox.js"></script>

  <!--This page JavaScript -->
  <!-- <script src="~/dist/js/pages/dashboards/dashboard1.js"></script> -->
  <!-- Charts js Files -->

  <!--Success Modal Templates-->
  <div class="modal fade modal-message modal-success" id="modal-success">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header"> <i class="far fa-check-circle"></i>
        </div>
        <div class="modal-title"> Correcto
        </div>
        <div class="modal-body"> La solicitud se efectuó con éxito
        </div>
        <div class="modal-footer"><button class="btn btn-success " data-dismiss="modal" type="button">Aceptar</button></div>
      </div>
    </div>
  </div>
  <!--End Success Modal Templates-->
  <!--Info Modal Templates-->
  <div class="modal fade modal-message modal-info" id="modal-info">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header"> <i class="fa fa-envelope"></i>
        </div>
        <div class="modal-title"> Información
        </div>
        <div class="modal-body"> Se le notifica información importante
        </div>
        <div class="modal-footer"><button class="btn btn-info " data-dismiss="modal" type="button">Ok</button></div>
      </div>
    </div>
  </div>
  <!--End Info Modal Templates-->
  <!--Danger Modal Templates-->
  <div class="modal fade modal-message modal-danger" id="modal-danger">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header"> <i class="glyphicon glyphicon-fire"></i>
        </div>
        <div class="modal-title"> Error
        </div>
        <div class="modal-body"> Se ha producido un error
        </div>
        <div class="modal-footer"><button class="btn btn-danger " data-dismiss="modal" type="button">Ok</button></div>
      </div>
    </div>
  </div>
  <!--End Danger Modal Templates-->
  <!--Warning Modal Templates-->
  <div class="modal fade modal-message modal-warning" id="modal-warning">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header"> <i class="fa fa-warning"></i>
        </div>
        <div class="modal-title"> Alerta
        </div>
        <div class="modal-body"> Algo ha salido mal
        </div>
        <div class="modal-footer"><button class="btn btn-warning " data-dismiss="modal" type="button">Ok</button></div>
      </div>
    </div>
  </div>
  <!--End Warning Modal Templates-->
  <!--Confirm Modal Templates-->
  <div id="core_modalconfirmdialog" style="display:none;">
    <div class="row">
      <div class="col-md-12">
        <div class="modal-header">
          <i class="fa fa-warning"></i>
        </div>
        <div class="modal-body">
          Mensaje
        </div>
        <div class="modal-body">
          Mensaje que iría en el centro
        </div>
      </div>
    </div>
  </div>
  <!--Confirm Modal Templates-->


</body>

</html>

    【讨论】：

    • 首先感谢您的回复卡尔。是的，我试过了，但有一些问题： - 例如，如果您尝试搜索“abrir”，则不会过滤任何元素，因为所有元素都有“abrir”一词。 - 过滤的项目显示不正确。我只需要按“卡片标题”过滤。 :(
    • 我更新了我的答案。看看，让我知道这是否有效。
    • 感谢 Carl，但该函数没有正确排序元素，因为我隐藏了卡片而不是父列。我包括了“this.parentNode”，现在它可以正常工作了。谢谢
    • 我已更新我的代码以反映您的最后评论。如果您的所有问题都已解决，请将此答案标记为正确。谢谢！
    【解决方案2】： 
    $('#box').keyup(function(){
   var valThis = $(this).val().toLowerCase();
    if(valThis === ""){
        $('.library_card > div').show();
    } else {
        $('.library_card > div').each(function(){
            var text = $(this).text().toLowerCase();
            (text.indexOf(valThis) >= 0) ? $(this).show() : $(this).hide();
        });
   };
});



// #box-- inpuut type text id
// .library_card -- div class

    【讨论】：

    • 首先感谢您的回复 Soumyanjan。有一些问题： - 例如，如果您尝试搜索“abrir”，则不会过滤任何元素，因为所有元素都包含“abrir”一词。
    【解决方案3】：

    我找到了这个方法来解决问题，防止卡片显示不正确：

                $(document).ready(function () {
                $("#myInput").on("keyup", function () {
                    var value = $(this).val().toLowerCase();
                    $(".card").filter(function () {
                        $(this.parentNode).toggle($(this).find('.card-title').text().toLowerCase().indexOf(value) > -1)
                    });
                });
            });
    .row {
  background: #f8f9fa;
  margin-top: 20px;
}

.col {
  border: solid 1px #6c757d;
  padding: 10px;
}

  .card {
        min-height: 250px;
    }
    <!DOCTYPE html>
<html dir="ltr" lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- Tell the browser to be responsive to screen width -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    <!-- Favicon icon -->
    <link rel="icon" type="image/png" sizes="16x16" href="/assets/images/favicon.png">
    <title>SGR - Desktop</title>
    <!-- Custom CSS -->
    <!-- Custom CSS -->
    <link href="/assets/css/font-awesome.css" rel="stylesheet" />
    <link href="/assets/libs/toastr/build/toastr.min.css" rel="stylesheet">
    <link href="/assets/libs/select2/dist/css/select2.min.css" rel="stylesheet">
    <link href="/dist/css/style.min.css" rel="stylesheet">
    <link href="/dist/css/core.css" rel="stylesheet">

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
        <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>

<body>
    <!-- ============================================================== -->
    <!-- Preloader - style you can find in spinners.css -->
    <!-- ============================================================== -->
    <div class="preloader">
        <div class="lds-ripple">
            <div class="lds-pos"></div>
            <div class="lds-pos"></div>
        </div>
    </div>
    <div id="main-wrapper">
        <div class="page-wrapper">
            <div class="page-breadcrumb">
                <div class="row">
                    <div class="col-12 d-flex no-block align-items-center">
                        


    <div class="header-title">
        <h1>
            Home
                    <small>
                        <i class="fa fa-angle-right"></i>
                        Desktop
                    </small>
        </h1>
    </div>

                    </div>
                </div>
            </div>
            <div class="container-fluid">
                

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<style>
</style>
<input class="form-control col-md-3 col-sm-4 col-xs-6" id="myInput" type="text" placeholder="Search..">
<br />
<br />
<div class="container">
    <div  id="myDIV"  class="row">

                <div class="col-md-3 col-sm-4 col-xs-6">
                        <div class="card" id="emulador project64">
                            <img class="card-img-top" src="">
                            <div class="card-body">
                                <h5 class="card-title">emulador project64</h5>
                                <p class="card-text">project64.exe</p>
                                <a href="project64.exe" target="_blank" class="btn btn-secondary">Abrir</a>
                            </div>
                        </div>


                </div>
                <div class="col-md-3 col-sm-4 col-xs-6">
                        <div class="card" id="overwatch">
                            <img class="card-img-top" src="">
                            <div class="card-body">
                                <h5 class="card-title">overwatch</h5>
                                <p class="card-text">overwatch.exe</p>
                                <a href="overwatch.exe" target="_blank" class="btn btn-secondary">Abrir</a>
                            </div>
                        </div>


                </div>
                <div class="col-md-3 col-sm-4 col-xs-6">
                        <div class="card" id="YouTube">
                            <img class="card-img-top" src="../../assets/images/YouTube.png">
                            <div class="card-body">
                                <h5 class="card-title">YouTube</h5>
                                <p class="card-text">Google Inc.</p>
                                <a href="https://www.youtube.com/" target="_blank" class="btn btn-secondary">Abrir</a>
                            </div>
                        </div>


                </div>
                <div class="col-md-3 col-sm-4 col-xs-6">
                        <div class="card" id="Canal de Denuncias">
                            <img class="card-img-top" src="">
                            <div class="card-body">
                                <h5 class="card-title">Canal de Denuncias</h5>
                                <p class="card-text">https://www.canaldedenuncia.cl/cda/metro/cdpages/Inicio.aspx</p>
                                <a href="https://www.canaldedenuncia.cl/cda/metro/cdpages/Inicio.aspx" target="_blank" class="btn btn-secondary">Abrir</a>
                            </div>
                        </div>


                </div>
                <div class="col-md-3 col-sm-4 col-xs-6">
                        <div class="card" id="Cipher">
                            <img class="card-img-top" src="">
                            <div class="card-body">
                                <h5 class="card-title">Cipher</h5>
                                <p class="card-text">www.cipher.cl</p>
                                <a href="www.cipher.cl" target="_blank" class="btn btn-secondary">Abrir</a>
                            </div>
                        </div>


                </div>
                <div class="col-md-3 col-sm-4 col-xs-6">
                        <div class="card" id="Terraria">
                            <img class="card-img-top" src="">
                            <div class="card-body">
                                <h5 class="card-title">Terraria</h5>
                                <p class="card-text">shared/terraria.exe</p>
                                <a href="shared/terraria.exe" target="_blank" class="btn btn-secondary">Abrir</a>
                            </div>
                        </div>


                </div>
                <div class="col-md-3 col-sm-4 col-xs-6">
                        <div class="card" id="Revista And&#233;n">
                            <img class="card-img-top" src="">
                            <div class="card-body">
                                <h5 class="card-title">Revista And&#233;n</h5>
                                <p class="card-text">http://nt25_intranet/archivos/revistas/2017-03/revista.pdf</p>
                                <a href="http://nt25_intranet/archivos/revistas/2017-03/revista.pdf" target="_blank" class="btn btn-secondary">Abrir</a>
                            </div>
                        </div>


                </div>
                <div class="col-md-3 col-sm-4 col-xs-6">
                        <div class="card" id="Smov2">
                            <img class="card-img-top" src="">
                            <div class="card-body">
                                <h5 class="card-title">Smov2</h5>
                                <p class="card-text">\\NT1_METRO\Aplicacion\Operaciones\smov2\SMOV 2.exe</p>
                                <a href="\\NT1_METRO\Aplicacion\Operaciones\smov2\SMOV 2.exe" target="_blank" class="btn btn-secondary">Abrir</a>
                            </div>
                        </div>


                </div>
                <div class="col-md-3 col-sm-4 col-xs-6">
                        <div class="card" id="Concursos internos">
                            <img class="card-img-top" src="">
                            <div class="card-body">
                                <h5 class="card-title">Concursos internos</h5>
                                <p class="card-text">https://metro.openagora.cl/</p>
                                <a href="https://metro.openagora.cl/" target="_blank" class="btn btn-secondary">Abrir</a>
                            </div>
                        </div>


                </div>
                <div class="col-md-3 col-sm-4 col-xs-6">
                        <div class="card" id="The Clinic">
                            <img class="card-img-top" src="">
                            <div class="card-body">
                                <h5 class="card-title">The Clinic</h5>
                                <p class="card-text">www.theclinic.cl</p>
                                <a href="www.theclinic.cl" target="_blank" class="btn btn-secondary">Abrir</a>
                            </div>
                        </div>


                </div>
                <div class="col-md-3 col-sm-4 col-xs-6">
                        <div class="card" id="Hotmail">
                            <img class="card-img-top" src="">
                            <div class="card-body">
                                <h5 class="card-title">Hotmail</h5>
                                <p class="card-text">http://www.hotmail.com</p>
                                <a href="http://www.hotmail.com" target="_blank" class="btn btn-secondary">Abrir</a>
                            </div>
                        </div>


                </div>
                <div class="col-md-3 col-sm-4 col-xs-6">
                        <div class="card" id="Gmail">
                            <img class="card-img-top" src="">
                            <div class="card-body">
                                <h5 class="card-title">Gmail</h5>
                                <p class="card-text">http://www.gmail.com</p>
                                <a href="http://www.gmail.com" target="_blank" class="btn btn-secondary">Abrir</a>
                            </div>
                        </div>


                </div>
                <div class="col-md-3 col-sm-4 col-xs-6">
                        <div class="card" id="CNN">
                            <img class="card-img-top" src="">
                            <div class="card-body">
                                <h5 class="card-title">CNN</h5>
                                <p class="card-text">www.cnn.org</p>
                                <a href="www.cnn.org" target="_blank" class="btn btn-secondary">Abrir</a>
                            </div>
                        </div>


                </div>
                <div class="col-md-3 col-sm-4 col-xs-6">
                        <div class="card" id="Metro Familia">
                            <img class="card-img-top" src="">
                            <div class="card-body">
                                <h5 class="card-title">Metro Familia</h5>
                                <p class="card-text">http://andensocial.metro.cl/aplicaciones-generales/metro-en-familia</p>
                                <a href="http://andensocial.metro.cl/aplicaciones-generales/metro-en-familia" target="_blank" class="btn btn-secondary">Abrir</a>
                            </div>
                        </div>


                </div>
                <div class="col-md-3 col-sm-4 col-xs-6">
                        <div class="card" id="League of Legends">
                            <img class="card-img-top" src="">
                            <div class="card-body">
                                <h5 class="card-title">League of Legends</h5>
                                <p class="card-text">lollauncher.exe</p>
                                <a href="lollauncher.exe" target="_blank" class="btn btn-secondary">Abrir</a>
                            </div>
                        </div>


                </div>
                <div class="col-md-3 col-sm-4 col-xs-6">
                        <div class="card" id="Minecraft Java Edition">
                            <img class="card-img-top" src="">
                            <div class="card-body">
                                <h5 class="card-title">Minecraft Java Edition</h5>
                                <p class="card-text">minecraft.exe</p>
                                <a href="minecraft.exe" target="_blank" class="btn btn-secondary">Abrir</a>
                            </div>
                        </div>


                </div>
                <div class="col-md-3 col-sm-4 col-xs-6">
                        <div class="card" id="Webmail Metro">
                            <img class="card-img-top" src="">
                            <div class="card-body">
                                <h5 class="card-title">Webmail Metro</h5>
                                <p class="card-text">https://mail.metro.cl/owa/auth/logon.aspx?replaceCurrent=1&amp;url=https%3a%2f%2fmail.metro.cl%2fowa%2f</p>
                                <a href="https://mail.metro.cl/owa/auth/logon.aspx?replaceCurrent=1&amp;url=https%3a%2f%2fmail.metro.cl%2fowa%2f" target="_blank" class="btn btn-secondary">Abrir</a>
                            </div>
                        </div>


                </div>
                <div class="col-md-3 col-sm-4 col-xs-6">
                        <div class="card" id="Autoconsulta ESS">
                            <img class="card-img-top" src="">
                            <div class="card-body">
                                <h5 class="card-title">Autoconsulta ESS</h5>
                                <p class="card-text">http://172.16.20.60:84/sse_generico/espanol/generico_login.jsp?estado=0</p>
                                <a href="http://172.16.20.60:84/sse_generico/espanol/generico_login.jsp?estado=0" target="_blank" class="btn btn-secondary">Abrir</a>
                            </div>
                        </div>


                </div>
                <div class="col-md-3 col-sm-4 col-xs-6">
                        <div class="card" id="And&#233;n Social">
                            <img class="card-img-top" src="">
                            <div class="card-body">
                                <h5 class="card-title">And&#233;n Social</h5>
                                <p class="card-text">http://andensocial.metro.cl</p>
                                <a href="http://andensocial.metro.cl" target="_blank" class="btn btn-secondary">Abrir</a>
                            </div>
                        </div>


                </div>
                <div class="col-md-3 col-sm-4 col-xs-6">
                        <div class="card" id="Sitio Conductores">
                            <img class="card-img-top" src="">
                            <div class="card-body">
                                <h5 class="card-title">Sitio Conductores</h5>
                                <p class="card-text">http://operaciones.metrosantiago.cl/</p>
                                <a href="http://operaciones.metrosantiago.cl/" target="_blank" class="btn btn-secondary">Abrir</a>
                            </div>
                        </div>


                </div>
    </div>
</div>



            </div>
            <footer class="footer text-center">
<div class="modal" id="loginModal"><div class="modal-dialog modal-lg"><div class="modal-content">                    <div id="login"></div>
</div></div></div>                
            </footer>
        </div>
    </div>
    <script src="/assets/libs/jquery/dist/jquery.min.js"></script>
    <!-- Bootstrap tether Core JavaScript -->
    <script src="/assets/libs/popper.js/dist/umd/popper.min.js"></script>
    <script src="/assets/libs/bootstrap/dist/js/bootstrap.min.js"></script>
    <script src="/assets/libs/perfect-scrollbar/dist/perfect-scrollbar.jquery.min.js"></script>
    <script src="/assets/extra-libs/sparkline/sparkline.js"></script>
    <!--Wave Effects -->
    <script src="/dist/js/waves.js"></script>
    <!--Menu sidebar -->
    <script src="/dist/js/sidebarmenu.js"></script>
    <!--Custom JavaScript -->
    <script src="/dist/js/custom.min.js"></script>
    <script src="/dist/js/core.js"></script>
    <script src="/assets/libs/toastr/build/toastr.min.js"></script>
    <script src="/assets/libs/select2/dist/js/select2.full.min.js"></script>
    <script src="/assets/libs/select2/dist/js/select2.min.js"></script>
    <script src="/assets/libs/jquery-validation/dist/jquery.validate.min.js"></script>
    <script src="/assets/libs/bootbox/bootbox.js"></script>

    <!--This page JavaScript -->
    <!-- <script src="~/dist/js/pages/dashboards/dashboard1.js"></script> -->
    <!-- Charts js Files -->

    <!--Success Modal Templates-->
<div class="modal fade modal-message modal-success" id="modal-success"><div class="modal-dialog"><div class="modal-content"><div class="modal-header">        <i class="far fa-check-circle"></i>
</div><div class="modal-title">        Correcto
</div><div class="modal-body">        La solicitud se efectuó con éxito
</div><div class="modal-footer"><button class="btn btn-success " data-dismiss="modal" type="button">Aceptar</button></div></div></div></div>
<!--End Success Modal Templates-->
<!--Info Modal Templates-->
<div class="modal fade modal-message modal-info" id="modal-info"><div class="modal-dialog"><div class="modal-content"><div class="modal-header">        <i class="fa fa-envelope"></i>
</div><div class="modal-title">        Información
</div><div class="modal-body">        Se le notifica información importante
</div><div class="modal-footer"><button class="btn btn-info " data-dismiss="modal" type="button">Ok</button></div></div></div></div><!--End Info Modal Templates-->
<!--Danger Modal Templates-->
<div class="modal fade modal-message modal-danger" id="modal-danger"><div class="modal-dialog"><div class="modal-content"><div class="modal-header">        <i class="glyphicon glyphicon-fire"></i>
</div><div class="modal-title">        Error
</div><div class="modal-body">        Se ha producido un error
</div><div class="modal-footer"><button class="btn btn-danger " data-dismiss="modal" type="button">Ok</button></div></div></div></div><!--End Danger Modal Templates-->
<!--Warning Modal Templates-->
<div class="modal fade modal-message modal-warning" id="modal-warning"><div class="modal-dialog"><div class="modal-content"><div class="modal-header">        <i class="fa fa-warning"></i>
</div><div class="modal-title">        Alerta
</div><div class="modal-body">        Algo ha salido mal
</div><div class="modal-footer"><button class="btn btn-warning " data-dismiss="modal" type="button">Ok</button></div></div></div></div><!--End Warning Modal Templates-->
<!--Confirm Modal Templates-->
<div id="core_modalconfirmdialog" style="display:none;">
    <div class="row">
        <div class="col-md-12">
            <div class="modal-header">
                <i class="fa fa-warning"></i>
            </div>
            <div class="modal-body">
                Mensaje
            </div>
            <div class="modal-body">
                Mensaje que iría en el centro
            </div>
        </div>
    </div>
</div>
<!--Confirm Modal Templates-->


</body>

</html>

    【讨论】：

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 2020-04-23
      • 1970-01-01
      • 2021-04-25
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2016-06-26
      相关资源
      最近更新 更多
      热门标签
      Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode