使用內聯CSS覆蓋jquery hide（）

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>

Java腳本

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

頁面加載時div是隱藏的，但是如果php變量不為空，那么我想在什么時候顯示div。

Answer 1

在CSS中將類變量dep-adm-inp為默認隱藏。 如果變量$adm_f不為空，則設置style='display:block;' 。 通過這種邏輯，您無需調用語句$(".dep-adm-inp").hide(); 在您的JavaScript中。 這樣，僅當變量$adm_f不為空時才顯示div。

Answer 2

.hide()方法設置display:none; 在你的元素上。 您可以通過設置display: block!important;來覆蓋它display: block!important; （或其他display屬性）在CSS中：

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

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

 <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>