javascript - 为什么更改父类为空输入？

Question

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

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

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

编辑:Vanilla JavaScript(不是 jQuery)按预期工作...为什么使用 jQuery？

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

这是完整的 fiddle :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 :

The input element represents a button that, when activated, resets the form.