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优先于内联样式，这就是为什么你没有看到元素出现。

Answer 2

正如其他人提到的那样，从显示CSS中删除!important。但是，如果您打算保留它，另一种方法是从DOM对象中删除该类。但是，如果您打算再次添加.more，则应选择其他内容。

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

如何使“display：none”元素出现

2 个答案: