javascript - 如何动态切换表单可见性？

Question

我有一个页面，用户可以在其中动态创建新表单。为每个新的表单按钮创建。默认情况下隐藏表单。我需要在单击该按钮时切换表单可见性。现在我正在使用下面的 javascript 代码及其工作

 $(document).ready(function(){
        $("#button1").click(function(){
            $("#1").css({"display":"block"});
            $("#2").css({"display":"none"});
            $("#3").css({"display":"none"});

        });
        $("#button2").click(function(){
            $("#2").css({"display":"block"});
            $("#1").css({"display":"none"});
            $("#3").css({"display":"none"});
        });
       ...

现在，当用户创建表单时，我手动修改 javascript，但问题是我现在的表单太多了，而且我还有更多。 我需要解决方案来绑定(bind)表单按钮并切换其可见性。任何建议表示赞赏。 编辑 我实际使用的代码:

while ($row = $result9->fetch_assoc()) 
        {
            echo "<input class='btn btn-default' type='button' id='".$row['o_ime']."'  name='button' value='".$row['o_ime']."'>";
        }
echo "<form class='form-inline' role='form' name='$i' id='$i' style='display:none' action='naruci.php' method='POST' onsubmit='return validateForm()'>";
form elements
echo "</form>";

Answer 1

首先，您的 DOM 中不能有相同的 ID。

因此，使用类代替 ID。并使用 jquery's class selector .

所以要捕获事件，只需使用类选择器即可。

并且还使用隐藏和显示 jquery API 来 show/hide元素。

 $(".new-btn").click(function(){
       $("form").hide(); // close all forms
       $("this").closest("form").show(); // show parent form
    });

接下来我注意到，对于动态元素，它不能被普通的点击事件捕获。在 API 上使用 jquery。

$(".new-btn").on('click', function(){
    $("form").hide(); // close all forms
    $("this").closest("form_").show(); // show parent form
                                       // This is the reason it is not working because I forgot the underscore
});

更新: 它应该看起来像这样:

while ($row = $result9->fetch_assoc()) 
{
    echo "<input class='btn btn-default' type='button' id='".$row['o_ime']."'  name='button' value='".$row['o_ime']."'>";

    // We changed the form ID in this section   
    echo "<form class='form-inline' role='form' name='$i' id='form_".$row['o_ime']."' style='display:none' action='naruci.php' method='POST' onsubmit='return validateForm()'>";
    form elements
    echo "</form>";
}

在我的查询中，我将创建一个事件来捕获我的按钮点击:

$('.btn').on('click', function(){ // Listen all click events of buttons with class `btn`
    var id = $(this).attr('id');  // Get ID of focus button
    var formName = 'form' + id;   // Append form string in the id to match form's ID

    $('form').hide();             // Hide all forms
    $('#' + formName).show();     // Show exact form
});