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

您好，我想有目录中的文件列表，并在每个文件下面有一个允许我的用户命名的表单。 这一切都很清楚——我是用php编写的，但是现在我想要这个列表和隐藏的表单，当我点击我的一个文件名时，表单显示在点击的名称下

比如这里：

代码如下：

但它的工作方式是，当我点击其中一个文件时，所有表单都会显示或隐藏。如何将其修复为仅适用于单击的文件

JSFIDLE示例：

@更新-类似问题

嘿，我在提交ajax表单时遇到了类似的问题-使用本教程：

我的表单是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>

$（函数（）{
$（“.button”）。单击（函数（）{
var txt=$（“.tekst#test”）.val（）；
var dataString='tekst='+tekscior；
$.ajax({
类型：“POST”，
url:“上传/基本”，
数据：dataString，
成功：函数（）{
$（'#upform'）.html（“”）；
$（“#消息”）
.html（“已描述！”）
.append（“谢谢！
”）
.hide（）
.fadeIn（1500，函数（）{
$（“#消息”）
.附加（“”）；
});
}
});
返回false；
});
});​

这是我的表格：

//只有这一个提交，即使我提交第二个

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

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

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

例如

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

您可以使用

next（）

jQuery方法。然后，您的代码将类似于：

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

---

在JSFIDLE网站上制作，当我有休息时间时会尝试帮助。不是这样的-查看我的小提琴：）无论如何谢谢1嘿，你能看看编辑的第一篇文章吗？我有一个类似的问题，我不能用这个解决方案来解决：]谢谢。