Question

当类不存在时，我试图将.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();
};

现在第2行和第3行的preparePage有效，但是第一行（#inputselected）没有

Answer 1

来自Mozilla的

DOMTokenList参考：

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。

Javascript中的classList.toggle

1 个答案: