爲什麼改變父類的空輸入？

Question

我想切換父元素（div /窗體，或者）上的類。我的CSS更改基於該父類的某些表單元素的可見性。

當在div/form上更新類時，表單中的所有輸入都清空/更改爲無值。大多數輸入的功能都可以，但對於那些始終可見的輸入，我不想在隱藏表單時丟失值。

基本上，我有一個基本的搜索表單和一個先進的。編輯：香草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：

輸入元素代表一個按鈕，該按鈕在激活時會重置 表單。