时间戳

首页 > 解决方案 > HTML-JS：大量按钮，每个按钮产生不同的形式

javascript - HTML-JS：大量按钮，每个按钮产生不同的形式

问题描述

在我的主页中，我希望有大量按钮（至少四个），每个按钮都会生成一个具有不同操作的表单。

任何时候都只能看到一个表格。

做这个的最好方式是什么？

我应该创建四个表单，当一个按钮被选中时，所有其他表单都会使用"visibility=hidden"并只显示我想要的那个？

这是我使用的代码：

<html>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

    <script type="text/javascript">

        $(document).ready(function(){
            $("#editForm_1").hide();
        $("#editForm_2").hide();
        $("#editForm_3").hide();
        $("#editForm_4").hide();
            $("#btn_1").click(function(e) {
                    $("#editForm_1").show();
            $("#editForm_2").hide();
            $("#editForm_3").hide();
            $("#editForm_4").hide();

                });
        $("#btn_2").click(function(e) {
                    $("#editForm_1").hide();
            $("#editForm_2").show();
            $("#editForm_3").hide();
            $("#editForm_4").hide();

                });
        $("#btn_3").click(function(e) {
                    $("#editForm_1").hide();
            $("#editForm_2").hide();
            $("#editForm_3").show();
            $("#editForm_4").hide();

                });
        $("#btn_4").click(function(e) {
                    $("#editForm_1").hide();
            $("#editForm_2").hide();
            $("#editForm_3").hide();
            $("#editForm_4").show();

                });
        });
    </script>

    <body>

        <button id="btn_1" class="editbutton" > 1 </button>
        <button id="btn_2" class="editbutton" > 2 </button>
        <button id="btn_3" class="editbutton" > 3 </button>
        <button id="btn_4" class="editbutton" > 4 </button>

        <form id="editForm_1"  action="" method="post" name="editForm">  
            <input type="text" name="txtname" placeholder="1">
        </form>

        <form id="editForm_2"  action="" method="post" name="editForm">  
            <input type="text" name="txtname" placeholder="2">
        </form>

        <form id="editForm_3"  action="" method="post" name="editForm">  
            <input type="text" name="txtname" placeholder="3">
        </form>

        <form id="editForm_4"  action="" method="post" name="editForm">  
            <input type="text" name="txtname" placeholder="4">
        </form>     




    </body>
</html>

标签： javascripthtmlformsbutton

解决方案

“最好的方式”显然是主观的。
也就是说，请注意设置style.visibility = "hidden"使元素不可见，但在页面上为它留下空白空间。
要获得更简洁的 UI，您可能需要使用style.display = "none".

下面建议的解决方案的算法是：

--- 从隐藏所有表单开始（使用 CSS）。
--- 监听文档中的任何点击。
--- 每当单击针对与表单相关的按钮之一时：
------ - 循环遍历所有表单，并且对于每个表单：
--------- - 隐藏表单。
--------- - 将表单的id属性与（单击的）按钮的data-form属性进行比较。
--------- - 如果表单与按钮匹配，则再次显示表单。 

const forms = document.querySelectorAll("form"); // Remembers a list of all the forms

document.addEventListener("click", changeForm); // Runs the function on clicks

function changeForm(event){

  // Makes sure a form button was clicked before proceding
  if(event.target.classList.contains("formBtn")){

    // Remembers which button was clicked
    const formBtn = event.target;
    
    // Converts the `forms` NodeList to an Array so we can use the `.forEach` method
    const formsArray = Array.from(forms);    

    // `forEach` takes one argument: a function that we provide using `=>` notation.
    //    Our function (which `forEach` calls once for EACH form in `formsArray`)
    //    gets each form as an argument, hides the form, then possibly reveals it again
    formsArray.forEach(form =>{
      form.style.display = "none"; // Hides the current form

      // Relies on the button's `data-form` attribute matching the form's `id`
      if(form.id == formBtn.dataset.form){
        // Reveals the current form if it matches the button
        form.style.display = "block";
      }
    });
  }
}
form{ height: 2em; width: 20em; border: 1px solid gray; display: none; }
<div>
  <div is="buttonsContainer">
    <button data-form="form1" class="formBtn">Form 1</button>
    <button data-form="form2" class="formBtn">Form 2</button>
    <button data-form="form3" class="formBtn">Form 3</button>
    <button data-form="form4" class="formBtn">Form 4</button>
  </div>
  <div id="formsContainer">
    <form id="form1">This is Form 1</form>
    <form id="form2">This is Form 2</form>
    <form id="form3">This is Form 3</form>
    <form id="form4">This is Form 4</form>
  </div>
</div>

推荐阅读