如何使「顯示：無」元素出現

在我的表單中有一些字段在頁面加載時不顯示，我希望它們在和僅當用戶在某些特定字段中輸入某些值時才顯示。這裏是HTML + CSS的片段：如何使「顯示：無」元素出現

<style> 
.more { 
    display: none !important; 
} 
</style> 

jQuery(document).ready(function(){ 

    jQuery('#budget_investito_imp').on('input',function(){ 
    jQuery(".more").show(); 
    if (jQuery("#iva").is(':filled') && jQuery("#budget_investito_imp").is(':filled')) { 
    var iva_imposta = (parseFloat(jQuery("#budget_investito_imp").val()) * parseFloat(jQuery("#iva").val()))/100; 
    var budget_investito_tot = parseFloat(jQuery("#budget_investito_imp").val()) + iva_imposta; 
    if (budget_investito_tot != NaN) 
     jQuery("#budget_investito_tot").val(budget_investito_tot); 
    } else 
    jQuery("#budget_investito_tot").val(0); 

}); 


<p> 
<label>Budget investito (totale) </label> 
<span class="field"> 
<input type="text" name="budget_investito_tot" id="budget_investito_tot" class="smallinput" value="<?php echo $lavorazione['budget_investito_tot'] ?>" /> 
</span> 
</p> 

<!-- HIDDEN!!! Appare solo se la lavorazione comprende una spesa --> 
<p class="field more"> 
<label>Fornitore</label> 
<span> 
    <input type="text" name="fornitore" id="fornitore" class="smallinput" value="" /> 
</span> 
</p> 

<p class="field more"> 
<label>Servizio</label> 
<span> 
<input type="text" name="servizio" id="servizio" class="smallinput" value="" /> 
</span> 
</p> 

<p class="field more"> 
<label>Dettagli spesa</label> 
<span> 
<textarea name="note" cols="40" rows="5" > </textarea> 
</p> 
<!-- HIDDEN --> 

<p> 
<label>Data</label> 
<span class="field"> 
<input id="datepicker" name="data_lavorazione" type="text" class="smallinput" value="<?php if (isset($_GET['id'])) echo $sistema->helper->invertData($lavorazione['data']); ?>" /> 
</span> 
</p>

所以有這應該出現3種

<p>

元素和我試圖使用jQuery功能.show（），但並未奏效。任何幫助？

來源

2015-06-24 Lory Lory

從CSS規則中取出'！important'。無論如何，這應該是最後的手段。 – isherwood

圍繞「重要」規則的唯一方法是另一個具有更高特異性或後續級聯順序的「重要」規則。如果可能的話，刪除重要的規則。如果這是不可能的，當您使用JavaScript或其他樣式規則設置顯示時，請使用'！important'。是否可以刪除'！important'？ –

編輯如下：

<style> 
.more { 
    display: none; 
} 
</style>

取出!important並預期它應該工作。

jQuery(".more").show();將定義一個內聯樣式，將其標記爲display: block;。但在你的樣式標籤中，!important優先於內聯樣式，這就是爲什麼你沒有看到該元素出現。

來源

2015-06-24 14:42:13 taxicala

正如其他人所提到的，從您的顯示CSS中刪除!important。但是，如果您打算保留它，另一種方法是從DOM對象中移除該類。但是，如果您打算再次添加.more，則應該選擇其他內容。

jQuery(".more").removeClass("more");

來源

2015-06-24 14:44:14 arao6

如何使「顯示：無」元素出現

回答

相關問題