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，但问题是我现在有太多表单，生病了甚至更多。我需要解决方案来绑定表单按钮并切换其可见性。任何建议都表示赞赏。编辑我正在使用的代码：

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。

因此，要捕获事件，只需使用类选择器。

并使用hide和show 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
});

Answer 2

按照此链接中的示例

，您将找到想要做的最佳方式

http://www.w3schools.com/jquery/eff_toggle.asp

$("button").click(function(){
    $("p").toggle();
});

Answer 3

您可以为所有表单添加唯一的类。请参阅此代码

<form class="test" id="1"></form>

<form class="test" id="2"></form>

<form class="test" id="3"></form>

$(document).on("click",".test",function(event){
     $(".test").css({"display":"none"});
     $(this).css({"display":"block"});
 });

Answer 4

只需创建自己的显示块类。

.db{
display:block;
}

然后在你的jquery上切换课程。

 $("button").click(function(){
$("#1").toggleClass('db');
})

Answer 5

\\对于动态生成的元素需要使用`on`来监听事件的触发

尝试以下

$(function(){
        //动态构造form元素
        //Dynamic construction of form elements
        $('#cnf').on('click',function(){
            $('#container').append('<div>' +
                                        '<button>toggle</button>' +
                                        '<form><input value="value"></form>' +
                                    '</div>')
        });


        //通过冒泡监听按钮事件
        //The bubble monitor button event
        $('#container').on('click','button',function(){
            $(this).next().toggle();
        })

    })

祝顺利！

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

5 个答案: