我有一个函数,点击后会显示表单。
我想知道是否有任何有效的方法来编写代码,而不是为4个不同的表单创建4个不同的函数?下面的例子是针对4个表单的,但我正在处理多个表单。
<div class="navbar">
<div class="dropdown">
<button class="dropbtn" onclick="myFunction1()">Category 1
<i class="fa fa-caret-down"></i>
</button>
</div>
/其他3类也是如此
<div id="form1" style = "display:none">
<form action="#" method="post" id="demoForm1" class="demoForm1" >
<fieldset>
<legend>Use CTRL to select multiple options</legend>
<p>
<select name="demoSel[]" id="demoSel" size="4" multiple>
<option value="ABC">ABC</option>
</select>
<input type="submit" value="Submit" />
<textarea name="display" id="display" placeholder="view select list value(s) onchange" cols="20" rows="4" readonly></textarea>
</p>
</fieldset>
</form>
</div>
//Same for other 3 forms
<script>
function myFunction1() {
document.getElementById("form1").style.display = '';
}
function myFunction2() {
document.getElementById("form2").style.display = '';
}
function myFunction3() {
document.getElementById("form3").style.display = '';
}
function myFunction4() {
document.getElementById("form4").style.display = '';
}
</script>
它的一般情况下 不是个好主意 来使用内联事件处理程序。
接下来,添加一个 data-*
属性,并删除每个按钮的 onclick
等属性。
<button class="dropbtn" data-target="form1">...</button>
<button class="dropbtn" data-target="form2">...</button>
<button class="dropbtn" data-target="form3">...</button>
<button class="dropbtn" data-target="form4">...</button>
然后,你可以使用 .addEventListener()
这些按钮上的类 dropbtn
并更新各自的表单元素显示属性,如
const btns = document.querySelectorAll(".dropbtn");
btns.forEach(function(btn) {
btn.addEventListener("click", function(cbox) {
document.getElementById(this.dataset.target).style.display = '';
});
});
Demo:
const btns = document.querySelectorAll(".dropbtn");
btns.forEach(function(btn) {
btn.addEventListener("click", function(cbox) {
document.getElementById(this.dataset.target).style.display = '';
});
});
<button class="dropbtn" data-target="form1">Form 1</button>
<button class="dropbtn" data-target="form2">Form 2</button>
<br><br>
<form id="form1" style="display:none">Form 1 Content Here</form>
<form id="form2" style="display:none">Form 2 Content Here</form>
不要使用on-event属性。
<button onclick='eventHandler()'></button>
使用事件监听器或事件属性。
const btn = document.querySelector('button');
btn.addEventListener('click', eventHandler);
// OR
btn.onclick = eventHandler;
如果你有多个目标要点击--将点击事件注册到所有目标标签共享的父标签。
document.querySelector('main').onclick = toggleForm;
而不是使用 "事件监听器 "或 "事件属性"。.style
在每个 <form>
切换班级
// CSS
.off { display: none }
// JavaScript
forms[idx].classList.toggle('off');
注。 详情请见演示
/*
- Reference the parent tag (<main>)
- Register <main> to the click event
- Event handler function toggleForm() is called on click
*/
document.querySelector('main').onclick = toggleForm;
// Event handler always passes Event Object (event)
function toggleForm(event) {
// Collect all <form>s into a HTML Collection
const forms = document.forms;
// Collect all <button> into a NodeList
const buttons = document.querySelectorAll('button');
// Reference the tag the user clicked (<button>)
const clicked = event.target;
// if a <button> was clicked...
if (clicked.matches('button')) {
// ...toggle the <button>'s .on and .off classes
clicked.classList.toggle('off');
clicked.classList.toggle('on');
/*
- Convert buttons NodeList into a rel Array
- Iterate through the buttons array and return
the index of the clicked <button>
*/
let idx = [...buttons].flatMap((button, index) => clicked === button ? [index] : []);
/*
- Toggle the .off class on the <form> located at the
index that was obtained from the previous statement
*/
forms[idx].classList.toggle('off');
}
}
button {
display: inline-block;
width: 11ch
}
button.off::before {
content: 'Show '
}
button.on::before {
content: 'Hide '
}
form.off {
display: none
}
<main>
<button class='off' type='button'>A</button>
<button class='off' type='button'>B</button>
<button class='off' type='button'>C</button>
<button class='off' type='button'>D</button>
<hr>
<form id='A' class='off'>
<fieldset>
<legend>Form A</legend>
</fieldset>
</form>
<form id='B' class='off'>
<fieldset>
<legend>Form B</legend>
</fieldset>
</form>
<form id='C' class='off'>
<fieldset>
<legend>Form C</legend>
</fieldset>
</form>
<form id='D' class='off'>
<fieldset>
<legend>Form D</legend>
</fieldset>
</form>
</main>