在jquery中显示/隐藏多个表单

Multiple show/hide forms in jquery

本文关键字：表单 隐藏 jquery 显示      更新时间：2023-09-26

您好，我想在目录中列出文件，并在每个文件下方有一个表单，允许我的用户命名它们。这一切都很清楚 - 我用 php 制作了它，但现在我想拥有这个列表和隐藏的表单，当我单击我的文件名之一时，表单显示在单击的名称下。

像这样的东西：http://papermashup.com/demos/jquery-sliding-div/#

这是代码：http://papermashup.com/simple-jquery-showhide-div/

但它在某种程度上起作用，当我单击其中一个文件时，所有表单都会显示或全部隐藏。如何修复它以仅适用于单击的文件？

JSFIDDLE 示例：http://jsfiddle.net/qbNrR/

@UPDATE - 类似问题

嘿，我在提交 ajax 表单时遇到了类似的问题 - 使用本教程：http://net.tutsplus.com/tutorials/javascript-ajax/submit-a-form-without-page-refresh-using-jquery/

我的表单在div id=#upform 中，当我尝试通过$ .ajax提交其中任何一个时，它只提交第一个，这是代码：

<script> 
 $(function() {
    $(".button").click(function() {
        var txt = $(".tekst#test").val();
        var dataString = 'tekst=' + tekscior;
        $.ajax({
            type: "POST",
            url: "upload/base",
            data: dataString,
            success: function() {
                $('#upform').html("<div id='message'></div>");
                $('#message')
                    .html("<h2>described!</h2>")
                    .append("<p>thanks!</p>")
                    .hide()
                    .fadeIn(1500, function() {
                        $('#message')
                            .append("<img id='checkmark' src='http://artivia-dev2/i/check.png' />");
                });
            }
        });
        return false;
    });
});​
</script>

以下是我的表格：

只有这个被提交，即使我提交第二个！

<div class="slidingDiv">
<div id="upform">
<form name="contact" action="">  
<input type="text" value="TESTFORM" class="tekst" id="test">
<input type="submit" name="submit" class="button" id="submit" value="Send" />
<form>
</div> 

<div class="slidingDiv">
<div id="upform">
<form name="contact" action=""> 
<input type="text" value="TESTFORM" class="tekst" id="test">
<input type="submit" name="submit" class="button" id="submit" value="Send" />
<form>
</div>

您可以使用 next() jQuery 方法。然后，您的代码将如下所示：

$(document).ready(function() {
    $(".slidingDiv").hide();
    $(".show_hide").show();
    $('.show_hide').click(function(e) {
        $(e.target).next(".slidingDiv").slideToggle();
    });
});​

尝试 event.currentTarget 以获取触发点击事件的表单

在点击事件中使用 jquery like

$(this).show(); // or hide();

如示例

$('.show_hide').click(function(){
  //$(".slidingDiv").slideToggle();
  $(this).slideToggle();
});
相关文章：