我需要编写一个 js 函数来通过单击下拉元素来显示一些 HTML block 。它就是不去。你能帮帮我吗,我做错了什么?
function parameterOne(e)
{
e = event || window.event;
// $('div.checkboxes').style.display = "none";
$('div.checkboxes:first-child').style.display = "block";
$('h4#kriterium').style.display = "block";
return true;
}
/* Dropdown Button */
.dropbtn {
background-color: #788bb6;
color: white;
padding: 10px 15px;
font-size: 13px;
cursor: pointer;
border: none;
border-radius: 3px;
}
/* Dropdown button on hover & focus
.dropbtn:hover, .dropbtn:focus {
background-color: #2C3459;
} */
/* The container <div> - needed to position the dropdown content */
.dropdown {
position: relative;
display: inline-block;
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
display: none;
position: absolute;
background-color: #fff;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
/* Links inside the dropdown */
.dropdown-content a {
color: #000;
padding: 10px 15px;
text-decoration: none;
display: block;
font-size: 13px;
}
/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #788bb6; color:#fff;}
/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
.show {display:block;}
/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {display: block;}
label.checkbox {
font-size: 13px;
border: none;
}
div.checkboxes {
margin-top: 15px;
display: none;
}
h4#kriterium {
display:none;
}
<div class="form">
<div class="dropdown">
<button onclick="dropdown()" class="dropbtn">Leads auswählen (sonst alle)</button>
<div id="Lead" class="dropdown-content">
<a href="#" onclick="parameterOne()" value="Click">Kriterium 1</a>
<a href="#">Kriterium 2</a>
<a href="#">Kriterium 3</a>
</div>
</div>
<h4 id="kriterium">Kriterium 1</h4>
<div class="checkboxes">
<label class="checkbox"><input type="checkbox" value="1"> Wert 1</label>
<label class="checkbox"><input type="checkbox" value="2"> Wert 2</label>
<label class="checkbox"><input type="checkbox" value="3"> Wert 3</label>
</div>
我希望通过单击菜单中的第一个链接来显示第一个 div.checkboxes,但控制台显示以下错误:
Uncaught TypeError: Cannot set property 'display' of undefined at parameterOne (custom.js:49) at HTMLAnchorElement.onclick (VM7759 admin.html:156)
最佳答案
您正在混合普通 Javascript 和 jQuery。试试这个:
$('div.checkboxes:first-child').css('display', 'block')
更多信息请点击:https://api.jquery.com/css/
如果您想要 Javascript 方式,您应该使用 js 选择器(例如 querySelector
或 getElementsBy...
)。 jQuery 返回它自己的元素拼写错误,但 Js 返回 HTMLCollection -> https://developer.mozilla.org/en-US/docs/Web/API/HTMLCollection
关于javascript - 构建 js 函数并在 HTML 中连接它时我做错了什么?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57677452/