javascript - 如何让 "display: none"元素出现

Question

在我的表单中有一些字段在页面加载时不显示，我希望它们显示在并且仅当用户在某些特定字段中输入某些值时。这是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() 但它没有用。有帮助吗？

Answer 1

编辑如下:

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

删除 !important，它应该会按预期工作。

jQuery(".more").show(); 将定义一个内联样式，将其标记为 display: block;。但是在您的样式标签中，!important 优先于内联样式，这就是您看不到元素出现的原因。