jquery中的多个显示/隐藏表单答案

【问题标题】：Multiple show/hide forms in jqueryjquery中的多个显示/隐藏表单
【发布时间】：2012-05-25 09:02:22
【问题描述】：

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

类似这里：http://papermashup.com/demos/jquery-sliding-div/#

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

但它的工作原理是，当我单击一个文件时，所有表单都会显示或全部隐藏。如何修复它仅适用于单击的文件？

@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>

【问题讨论】：

在 jsfiddle 网站上制作它，当我有休息时间时会尝试帮助

标签： javascript jquery ajax

【解决方案1】：

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

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

【讨论】：

嘿，你能看看编辑的第一篇文章吗？我有一个类似的问题，我无法用这个解决方案解决：] 谢谢。

【解决方案2】：

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

【讨论】：

【解决方案3】：

在点击事件时使用 jquery 之类的

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

如示例

$('.show_hide').click(function(){
  //$(".slidingDiv").slideToggle();
  $(this).slideToggle();
});

【讨论】：

不是这样 - 检查我的小提琴 :) 无论如何谢谢1