Question

您好我希望目录中有文件列表，并且每个文件下面都有一个表单，允许我的用户为它们命名。这一切都很清楚 - 我在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>

Answer 1

您可以使用next() jQuery方法。然后你的代码看起来像：

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

Answer 2

尝试使用event.currentTarget获取触发click事件的表单

Answer 3

点击事件使用jquery如

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

如示例

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

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

3 个答案: