[英]Creating efficient function instead of repetitive functions
I have a function which onclick displays the form.我有一个 function onclick 显示表格。
Was wondering if there is any efficient way to code instead of creating 4 different functions for 4 different forms?想知道是否有任何有效的编码方式,而不是为 4 个不同的 forms 创建 4 个不同的函数? Below example is for 4 forms but I am working with multiple forms.下面的示例适用于 4 个 forms,但我正在使用多个 forms。
<div class="navbar">
<div class="dropdown">
<button class="dropbtn" onclick="myFunction1()">Category 1
<i class="fa fa-caret-down"></i>
</button>
</div>
//Same for other 3 categories //其他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>
It's generally not a good idea to use inline event handlers.使用内联事件处理程序通常不是一个好主意。
Next, add a data-*
attribute to each button and remove the onclick
attribute like:接下来,为每个按钮添加一个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>
Then, you can use .addEventListener()
on these buttons with class dropbtn
and update respective form element display property like:然后,您可以通过 class dropbtn
在这些按钮上使用 .addEventListener .addEventListener()
并更新相应的表单元素显示属性,例如:
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>
Don't use on-event attributes:不要使用事件属性:
<button onclick='eventHandler()'></button>
Use event listeners or on-event properties:使用事件侦听器或事件属性:
const btn = document.querySelector('button');
btn.addEventListener('click', eventHandler);
// OR
btn.onclick = eventHandler;
If you have multiple targets to click -- register the click event to a parent tag that all target tags share.如果您有多个要单击的目标 - 将单击事件注册到所有目标标记共享的父标记。
document.querySelector('main').onclick = toggleForm;
Instead of using .style
on each <form>
toggle classes而不是在每个<form>
切换类上使用.style
// CSS
.off { display: none }
// JavaScript
forms[idx].classList.toggle('off');
Note: Details are commented in demo注:详情在demo中注释
/* - 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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.