Question

我正在尝试为每个表单构建一个按钮;当用户点击它时，具有特定ID的特定表单将再次显示或隐藏。

我已经尝试过以下JavaScript代码，但它不起作用。

这段代码错了还是我错过了什么？有人有另一个想法吗？提前谢谢。

＆＃13;

$(function(){
    $('.btn').on('click', function(e){
        e.preventDefault();
        $(this).next('.form2').show();
    });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<?php 
$result_posts = $conn -> prepare("SELECT * FROM posts WHERE post_topic=:post_topic ORDER BY DATE(post_date) ASC");
$result_posts -> bindParam(':post_topic',$topic_id);
$result_posts -> execute();
while ($row2 = $result_posts ->fetch(PDO::FETCH_ASSOC)) 
{
?>

<a class="btn" id="<?php echo $row2['post_id']; ?>"><i class="fa fa-commenting" aria-hidden="true"></i>Comment</a>

<form name="form2" class="form2" id=" <?php echo $row2['post_id']; ?>" style="display:none">
<textarea class="commenting" id="commenting" placeholder="Comment here..." cols="30" rows="5"></textarea>
<input type="submit" class="comment_submit2" value="Submit" >
</form>

<?php } ?>

＆＃13;

Answer 1

需要使用toggle()： -

工作示例： -

$(function(){
    $(document).on('click', '.btn',function(e) {
        e.preventDefault();
        $(this).next('.form2').toggle();
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="btn"><i class="fa fa-commenting" aria-hidden="true"></i>Comment</a>

<form name="form2" class="form2" style="display:none">
<textarea class="commenting" id="commenting" placeholder="Comment here..." cols="30" rows="5"></textarea>
<input type="submit" class="comment_submit2" value="Submit" >
</form>

<br>
<br>
<a class="btn"><i class="fa fa-commenting" aria-hidden="true"></i>Comment</a>

<form name="form2" class="form2" style="display:none">
<textarea class="commenting" id="commenting" placeholder="Comment here..." cols="30" rows="5"></textarea>
<input type="submit" class="comment_submit2" value="Submit" >
</form>

注意： - 注意在任何情况下都不会重复id（在你的代码中，它发生在按钮id和它的相应表单id上）。

我已从按钮以及代码中的表单中删除了id。（如果需要，然后尝试使它们各不相同）

Answer 2

以下是jQuery的示例，显示了多个表单。默认情况下会显示第一个表单内容。

$(function(){
    $('.btn').on('click', function(e){
        e.preventDefault();
        $("form").css("display","none");
        var TargetDiv = $(this).attr("data-target");
        $("#" + TargetDiv).show();
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button class="btn" data-target="form1">Form 1</button>
<button class="btn" data-target="form2">Form 2</button>
<button class="btn" data-target="form3">Form 3</button>

<form id="form1" style="display: block;">
    <label>show form one content by default</label>
</form>
<form id="form2" style="display: none;">
    <label>form two content</label>
</form>
<form id="form3" style="display: none;">
    <label>form three content</label>
</form>

Answer 3

首先，您不应该在同一文档中重复ID。我可以注意到你的按钮和表单ID相同。

那么你可以做什么用post_id串起一些字符串，如按钮

＆＃34; BTN _＆＃34; + post_id

并发布类似的内容 -

＆＃34;形成_＆＃34; + post_id

使用toggel，这样它会在每次点击时反转形状状态。如果隐藏它将是可见的，如果在点击时可见，它将被隐藏。

检查我的小提琴。 https://jsfiddle.net/stdeepak22/crrwa7Ls/

根据按钮ID显示/隐藏表单

3 个答案: