Question

我正在尝试在父元素（div / form）上切换类。我的CSS根据父类更改了某些表单元素的可见性。

当在div / form上更新类时，表单中的所有输入都被清空/更改为无值。大多数输入的功能都可以，但对于那些始终可见的输入，我不想在隐藏表单时丢失该值。

基本上，我有一个基本的搜索表单和一个高级搜索表单。

编辑：Vanilla JavaScript（不是jQuery）按预期工作......为什么jQuery？

var d = document.getElementById("div");
d.className = d.className + " advanced";

以下是完整的小提琴：https://jsfiddle.net/psalmody/Lsnsaups/2/

CSS：

#div .search-advanced {
  display:none;
}

#div.advanced .search-advanced {
  display:inline-block;
}

HTML：

<div id="div">
<form id="searchForm">
<fieldset>
  <div>
    <label for="term">Semester:</label>
    <select id="term">
      <option disabled></option>
    </select>
  </div>
  <div>
    <label for="subj">Subject(s):</label>
    <input type="text" id="subj"></select>
  </div>
  <div class="search-advanced">
    <label for="crse">Course Number:</label>
    <input type="text" id="crse" maxlength="5">
  </div>
  <div class="search-advanced">
    <label for="sec">Section:</label>
    <input type="text" id="sec" maxlength="3">
  </div>
  <div class="search-advanced">
    <label for="crn">CRN(s):</label>
    <input type="text" id="crn">
  </div>
  <div class="search-advanced">
    <label for="title">Title:</label>
    <input type="text" id="title">
  </div>
</fieldset>
</form>
</div>

jQuery的：

$(function () {
    $('#advanced').click(function () {
        $('#div').toggleClass('advanced')
    })
})

Answer 1

您正在使用<button>类型reset，它会将所有表单的控件设置为其初始值。来自HTML specification：

input元素表示一个按钮，当激活时，重置形式。

为什么更改父类空输入？

1 个答案: