Javascript 中的 classList.toggle答案

【问题标题】：classList.toggle in JavascriptJavascript 中的 classList.toggle
【发布时间】：2014-08-23 15:45:41
【问题描述】：

当类不存在时，我试图将 .hidden 分配给某些元素，如果该类已分配给该元素，则删除类 .hidden 。换句话说 - 我只想切换类。

我写了代码

var isHidden = document.getElementById("inputSelected").classList.toggle("hidden");

但它不起作用。但是当我控制台日志 classList.contains

var isHidden = document.getElementById("inputSelected").classList.contains("hidden");

它返回 false - 这意味着它没有分配这个类。那为什么它不切换呢？

更多代码：

<!DOCTYPE html>
<html>
<head>
<title>Kalkulator dat</title>
<meta name="description" content="Kalkulator dat. Ile dni minęło od wskazanej daty? Jaka będzie data za daną ilość dni?">
<link rel="StyleSheet" type="text/css" href="style.css">
</head>

<body>
<h1>Kalkulator dat</h1>
<div id="daysPassed">
    <h2>Ile pełnych dni minęło?</h2>
    <form id=daysPassedForm">
        <label for="firstDateDP">Data początkowa:</label>
        <input type="date" id="firstDate">
        <fieldset>
            <input type="radio" id="toToday" name="todayOrSelected">    
            <label for="toToday">Do dziś</label>

            <input type="radio" id="toSelected" name="todayOrSelected"> 
            <label for="toSelected">Do wskazanej daty</label> 
            <p id="inputSelected">(<input type="date" id="selectedEndDate">)</p>

        </fieldset>
        <input type="submit" value="Oblicz">
        </form>
</div>

<div id="daysPassedResult" class="result">
    <p id="daysPassedInfo">Od wskazanej daty minęło x dni</p>
</div>

<div id="dateIndicate">
    <h2>Jaka będzie data?</h2>
    <form id="dateIndicateForm">
        <ul>
            <li>
                <label for="firstDateDI"><span>Data początkowa:</span></label>
                <input type="date" id="firstDateDI">
            </li>

            <li>
            <label for="numberOfDays"><span>Liczba pełnych dni:</span></label>
            <input type="number" id="numberOfDays" step="1">
            </li>

            <li>
            <input type="submit" value="Oblicz">
            </li>
        </ul>
    </form>
</div>

<div id="dateIndicateResult" class="result">
    <p id="dateIndicateResult">Po x dniach od y będzie</p>
</div>

<script src="script.js"></script>
</body>
</html>


div {
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box; 
margin-bottom: 7px;
}

body {
margin: 0 auto;
width: 40%;
background-color: #FFCA51;
}

div {
padding: 5px;
border-radius: 15px;
}

p {
margin: 8px 0 8px 0;
}

ul {
list-style-type: none;
padding: 0;
}

h1 {
text-align: center;}

fieldset {
border: none;
}

input {
margin: 2px;
padding: 1px;
}

span {
width: 115px;
text-align: right;
display: inline-block;
}


#daysPassed {
background-color: #E8A849;
padding-left: 16px;
}

#inputSelected {
margin: 0 0 0 8px;
display: inline-block;
}

#daysPassedResult {
background-color: #FFA75D;
}

#dateIndicate {
background-color: #E87A49;
padding-left: 16px;
margin-top: 20px;
}

#dateIndicateResult {
background-color: #FF6D51;
}

.result {
margin: 8px 0 8px 16px;
padding-left: 12px;
max-width: 50%;
}

.hidden {
display: none;}


function preparePage() {
    document.getElementById("inputSelected").classList.toggle("hidden");
    document.getElementById("daysPassedResult").classList.toggle("hidden");
    document.getElementById("dateIndicateResult").classList.toggle("hidden");
}

window.onload = function() {
    preparePage();
};

现在第二行和第三行 preparePage 可以工作，但第一行 (#inputselected) 不行

【问题讨论】：

你为什么要把 javascript 和 jquery 混在一起？
classList 是 jquery 吗？我以为它只是 javascript...不是在 jquery toggleClass() 中吗？
我在谈论document.getElementById
@Mritunjay：这个例子中没有 jQuery。
你怎么知道它“不起作用”？

标签： javascript class toggle contains

【解决方案1】：

DOMTokenList来自Mozilla的参考：

toggle ( token ) - 从字符串中删除 token 并返回 false。如果token 不存在，则添加它并且函数返回true

您的代码确实有效，但似乎问题不是由 DOMTokenList .toggle() 函数引起的，而是由 CSS id #inputSelected 引起的：

#inputSelected {
  margin: 0 0 0 8px;
  display: inline-block; /* will never let .hidden to actually set the "display: none". */
}

.hidden {
  display: none;
}

修复它的一个简单方法是定义：

.hidden {
  display: none !important;
}

或在单独的类中定义display: inline-block;。

如果问题真的是.toggle，DOMTokenList 还是有：

.contains
.add
.remove

否则，您可以使用 jQuery 或手动管理 element.className。

【讨论】：