Question

HTML

<div class="dep-adm-inp" <?php if(!empty($adm_f) || $adm_f != "") echo "style='display:block'"; ?> id="fees-inp">
    <label>Admission Fees(<i class="fa fa-inr"></i>)</label>
    <div class="input-group">
        <span class="input-group-addon remove-inp"><i class="fa fa-close"></i></span>
        <input type="text" class="form-control expected" value="<?php if(!empty($adm_f)) echo $adm_f; ?>" placeholder="Amount Expected">
        <input type="text" class="form-control paid" value="<?php if(!empty($adm_f)) echo $adm_f; ?>" placeholder="Paid Amount">
    </div>
</div>

的Javascript

$(".dep-adm-inp").hide();

当页面加载时div被隐藏，但如果php变量不为空，那么我想在何时显示div。

Answer 1

默认情况下，将类变量dep-adm-inp设置为隐藏在css中。如果变量$adm_f不为空，请设置style='display:block;'。有了这个逻辑，您就不需要在javascript中调用语句$(".dep-adm-inp").hide();。这样，只有当变量$adm_f不为空时才会显示div。

Answer 2

.hide()方法在您的元素上设置display:none;。您可以通过在CSS中设置display: block!important;（或任何display属性）来覆盖它：

＆＃13;

setTimeout(() => {
  $('.item').hide();
}, 2000);

＆＃13;

.container {
  display: flex;
}

.item {
  width: 200px;
  height: 100px;
  background-color: darkgoldenrod;
  margin: 10px;
}


/* This makes .item visible even after .hide() */

.item-visible {
  display: block!important;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="item item-visible">Will be visible</div>
  <div class="item">Will be hidden</div>
</div>

＆＃13;

使用内联css覆盖jquery hide（）

2 个答案: