Jar*_*ers 5 javascript class contains toggle
\n我试图在类不存在时将 .hidden 分配给某些元素，如果该类已分配给该元素，则删除 .hidden 类。换句话说 - 我只是想切换班级。
我写了代码
\n\nvar isHidden = document.getElementById("inputSelected").classList.toggle("hidden");\n但它不起作用。但是当我控制台日志 classList.contains 时
\n\nvar isHidden = document.getElementById("inputSelected").classList.contains("hidden");\n它返回 false - 这意味着它没有分配这个类。那么为什么它不切换呢？
\n\n更多代码：
\n\n<!DOCTYPE html>\n<html>\n<head>\n<title>Kalkulator dat</title>\n<meta name="description" content="Kalkulator dat. Ile dni min\xc4\x99\xc5\x82o od wskazanej daty? Jaka b\xc4\x99dzie data za dan\xc4\x85 ilo\xc5\x9b\xc4\x87 dni?">\n<link rel="StyleSheet" type="text/css" href="style.css">\n</head>\n\n<body>\n<h1>Kalkulator dat</h1>\n<div id="daysPassed">\n <h2>Ile pe\xc5\x82nych dni min\xc4\x99\xc5\x82o?</h2>\n <form id=daysPassedForm">\n <label for="firstDateDP">Data pocz\xc4\x85tkowa:</label>\n <input type="date" id="firstDate">\n <fieldset>\n <input type="radio" id="toToday" name="todayOrSelected"> \n <label for="toToday">Do dzi\xc5\x9b</label>\n\n <input type="radio" id="toSelected" name="todayOrSelected"> \n <label for="toSelected">Do wskazanej daty</label> \n <p id="inputSelected">(<input type="date" id="selectedEndDate">)</p>\n\n </fieldset>\n <input type="submit" value="Oblicz">\n </form>\n</div>\n\n<div id="daysPassedResult" class="result">\n <p id="daysPassedInfo">Od wskazanej daty min\xc4\x99\xc5\x82o x dni</p>\n</div>\n\n<div id="dateIndicate">\n <h2>Jaka b\xc4\x99dzie data?</h2>\n <form id="dateIndicateForm">\n <ul>\n <li>\n <label for="firstDateDI"><span>Data pocz\xc4\x85tkowa:</span></label>\n <input type="date" id="firstDateDI">\n </li>\n\n <li>\n <label for="numberOfDays"><span>Liczba pe\xc5\x82nych dni:</span></label>\n <input type="number" id="numberOfDays" step="1">\n </li>\n\n <li>\n <input type="submit" value="Oblicz">\n </li>\n </ul>\n </form>\n</div>\n\n<div id="dateIndicateResult" class="result">\n <p id="dateIndicateResult">Po x dniach od y b\xc4\x99dzie</p>\n</div>\n\n<script src="script.js"></script>\n</body>\n</html>\n\n\ndiv {\n box-sizing: border-box;\n -webkit-box-sizing: border-box;\n -moz-box-sizing: border-box; \nmargin-bottom: 7px;\n}\n\nbody {\nmargin: 0 auto;\nwidth: 40%;\nbackground-color: #FFCA51;\n}\n\ndiv {\npadding: 5px;\nborder-radius: 15px;\n}\n\np {\nmargin: 8px 0 8px 0;\n}\n\nul {\nlist-style-type: none;\npadding: 0;\n}\n\nh1 {\ntext-align: center;}\n\nfieldset {\nborder: none;\n}\n\ninput {\nmargin: 2px;\npadding: 1px;\n}\n\nspan {\nwidth: 115px;\ntext-align: right;\ndisplay: inline-block;\n}\n\n\n#daysPassed {\nbackground-color: #E8A849;\npadding-left: 16px;\n}\n\n#inputSelected {\nmargin: 0 0 0 8px;\ndisplay: inline-block;\n}\n\n#daysPassedResult {\nbackground-color: #FFA75D;\n}\n\n#dateIndicate {\nbackground-color: #E87A49;\npadding-left: 16px;\nmargin-top: 20px;\n}\n\n#dateIndicateResult {\nbackground-color: #FF6D51;\n}\n\n.result {\nmargin: 8px 0 8px 16px;\npadding-left: 12px;\nmax-width: 50%;\n}\n\n.hidden {\ndisplay: none;}\n\n\nfunction preparePage() {\n document.getElementById("inputSelected").classList.toggle("hidden");\n document.getElementById("daysPassedResult").classList.toggle("hidden");\n document.getElementById("dateIndicateResult").classList.toggle("hidden");\n}\n\nwindow.onload = function() {\n preparePage();\n};\n现在，preparePage 的第二行和第三行有效，但第一行 (#inputselected) 不起作用
\n小智 6
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 .removeelement.className否则，您可以使用 jQuery 或手动管理。
| 归档时间： |
|
| 查看次数： |
28748 次 |
| 最近记录： |