Javascript中的classList.toggle_Javascript_Class_Toggle_Contains

Javascript中的classList.toggle

javascript class

Javascript中的classList.toggle,javascript,class,toggle,contains,Javascript,Class,Toggle,Contains,我正在尝试在类不存在时将.hidden分配给某些元素，并删除类。如果此类已分配给此元素，则将.hidden分配给该元素。换句话说，我只想切换类我写了代码 var isHidden = document.getElementById("inputSelected").classList.toggle("hidden"); 但它不起作用。但是当我控制台log classList.contains时 var isHidden = document.getElementById("inputSele

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

我写了代码

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

但它不起作用。但是当我控制台log 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();
};


卡尔库拉托数据
卡尔库拉托数据
你的名字是什么？
Mozilla的参考资料：
切换（令牌）
-从字符串中删除令牌
，并返回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;
}

或定义显示：内联块在单独的类中
如果问题真的是.toggle
，DOMTokenList
仍然有：

。包含
。添加
。删除

否则，您可以使用jQuery或手动管理元素.className
。
为什么要将javascript与jQuery混合使用？classList是jQuery？我以为这只是javascript。。。它不是在jquery toggleClass（）中吗？我在谈论文档。getElementById
@Mritunjay:这个例子没有jquery。你怎么知道它“不起作用”？