jQuery在while循环中点击淡出隐藏元素
jQuery on click fade in hidden element in while loop
我有一个表单在while循环激活,当我点击Reply
按钮。这我可以做得很简单,但它在while循环中,需要一个唯一的ID。我的代码工作到现在,但它只适用于第一个结果。当我点击其他结果时,什么也没有发生。即使我已经分配了一个唯一的ID,它不工作。我的代码如下:
jQuery部分:
$(document).ready(function() {
$("#reply").on('click', 'a.click', function() {
var rowid = $(this).attr("data-rowid");
$(".reply-comment-holder[data-rowid='" + rowid + "']").fadeToggle(800),
$(this).toggleClass(".reply-comment-holder[data-rowid='" + rowid + "']");
});
});
HTML部分:
<?php while($fetch_cmts = $get_cmtq->fetch()){ extract($fetch_cmts); ?>
<div id="reply"><a href="javascript:;" data-rowid="<?php echo $cmt_id?>" class="click show-reply-box">Reply</a></div>
<div class="reply-comment-holder" data-rowid="<?php echo $cmt_id?>" style="display:none;">
<form method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>" class="full-width cmtform" id="cmt_form_id_<?php echo $cmt_id?>">
<input type="hidden" name="status_id" value="<?php echo $cmt_id; ?>" id="cmtsid_<?php echo $cmt_id?>" />
<textarea name="comment" placeholder="Give a reply..." class="reply-comment-field commentarea" id="replycomment_<?php echo $cmt_id?>"></textarea>
</form>
</div>
<?php } ?>
HTML
<div class="reply"><a href="javascript:;" data-rowid="1" class="click show-reply-box">Reply</a></div>
<div class="reply-comment-holder" data-rowid="1" style="display:none;">
<form method="post" action="#" class="full-width cmtform" id="cmt_form_id_1">
<input type="hidden" name="status_id" value="1" id="cmtsid_1" />
<textarea name="comment" placeholder="Give a reply..." class="reply-comment-field commentarea" id="replycomment_1"></textarea>
</form>
</div>
<div class="reply"><a href="javascript:;" data-rowid="2" class="click show-reply-box">Reply</a></div>
<div class="reply-comment-holder" data-rowid="2" style="display:none;">
<form method="post" action="#" class="full-width cmtform" id="cmt_form_id_2">
<input type="hidden" name="status_id" value="2" id="cmtsid_2" />
<textarea name="comment" placeholder="Give a reply..." class="reply-comment-field commentarea" id="replycomment_2"></textarea>
</form>
</div>
javascript $(document).ready(function() {
$(".reply").on('click', 'a.click', function() {
var rowid = $(this).attr("data-rowid");
$(".reply-comment-holder[data-rowid='" + rowid + "']").fadeToggle(800),
$(this).toggleClass(".reply-comment-holder[data-rowid='" + rowid + "']");
});
});
jsbin列在上面的注释中
相关文章:
- 音频控件在mouseover上显示,在mouseout上淡出
- 在单击任何位置时隐藏元素,而不检查每次DOM单击
- 显示5秒后隐藏潜水
- 在不使用JQuery的情况下隐藏DOM中的选定元素
- 剑道UI内联编辑:如何在点击其他按钮时隐藏按钮
- 浮动页脚栏-使用Bootstrap隐藏
- 在jquery中为显示/隐藏设置cookie
- 单击按钮后如何逐个调用分区,上一个分区将隐藏
- 从var向代码隐藏函数传递值
- Image赢得't隐藏在滚动jQuery上
- 具有rowGrouping的数据表无法隐藏列
- 简单的jQuery淡入淡出动画 - 如何显示/隐藏DIVS
- Javascript中的简单隐藏和淡入淡出
- 隐藏正文直到加载,jQuery淡出而不是javascript隐藏
- jQuery在while循环中点击淡出隐藏元素
- 当选择完成时,淡出添加更多链接,否则隐藏它
- 隐藏引导模式与淡出效果使用Javascript
- 如何添加淡入/淡出效果到我的函数,而不是仅仅设置可见性隐藏/可见
- 隐藏式可见度在淡出后多次闪烁
- 单击时具有淡入淡出效果的隐藏/返回发送按钮