jQuery on click在while循环中淡入隐藏元素

时间:2016-10-26 17:40:25

标签: javascript php jquery html ajax

我在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 + "']");
    });
});

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

请帮助jQuery / Ajax。

1 个答案:

答案 0 :(得分:1)

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列在上面的评论中。