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

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

我已经尝试了下面的JavaScript代码，但它不起作用。

这段代码错了吗？还是我错过了什么？有人有另一个想法吗？在此先感谢。

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

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

来源

2017-04-14 Ioannis P.

你有没有在你的片段包括jQuery的 - 你，包括它在你的网页？考虑编辑你的PHP/HTML代码，而不是一个精确代表输出的小型HTML代码片段。 – Santi

我正在使用“jquery-3.1.0.min.js” –

您是否正在通过ajax加载您的表单？我在代码中看不到任何问题，它应该可以工作。 –

需要使用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。（如果需要的话，然后尝试使它们为每一个不同的）

来源

2017-04-14 18:26:41

-ve已标记的人，请问为什么？ –

这里是与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>

来源

2017-04-14 18:32:09 EdwardM

首先，你不应该repeate同一个文档中的ID。我可以注意到你会有按钮和表单ID相同。

所以你可以做什么Concat的一些字符串post_id像按钮

“btn_” + POST_ID

和后像 -

“form_” + POST_ID

使用toggel，因此它会反转每次点击的形式状态。如果隐藏，它将显示，如果点击时可见，它将被隐藏。

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

来源

2017-04-14 18:33:11

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

回答

相关问题