duanqian2368
2016-10-26 17:40
浏览 66

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

I have a form in while loop which activates when I click on Reply button. This I can do simply but its in while loop and requires a unique ID. With my code its working till now but it works only for the first result. When I click on the other results nothing happens. Even though I have already assigned a unique ID its not working. My code is given below:

jQuery part:

$(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 part:

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

Please help with jQuery/Ajax.

图片转代码服务由CSDN问答提供 功能建议

我在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部分:

 &lt  ;?php while($ fetch_cmts = $ get_cmtq-&gt; fetch()){extract($ fetch_cmts);  ?&gt; 
&lt; div id =“reply”&gt;&lt; a href =“javascript:;”  data-rowid =“&lt;?php echo $ cmt_id?&gt;”  class =“click show-reply-box”&gt;回复&lt; / a&gt;&lt; / div&gt; 
&lt; div class =“reply-comment-holder”data-rowid =“&lt;?php echo $ cmt_id?&gt;  ;”  style =“display:none;”&gt; 
&lt; form method =“post”action =“&lt;?php echo $ _SERVER ['PHP_SELF'];?&gt;”  class =“full-width cmtform”id =“cmt_form_id_&lt;?php echo $ cmt_id?&gt;”&gt; 
&lt; input type =“hidden”name =“status_id”value =“&lt;?php echo $ cmt_id;  ?&gt;”中 id =“cmtsid_&lt;?php echo $ cmt_id?&gt;”  /&gt; 
&lt; textarea name =“comment”placeholder =“给予回复...”class =“reply-comment-field commentarea”id =“replycomment_&lt;?php echo $ cmt_id?&gt;”&gt;&lt;  ; / textarea&gt; 
&lt; / form&gt; 
&lt; / div&gt; 
&lt;?php}?&gt; 
   
 
 

请帮助jQuery / Ajax 。

  • 写回答
  • 关注问题
  • 收藏
  • 邀请回答

1条回答 默认 最新

  • doukong1391 2016-10-26 17:58
    已采纳

    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 is listed in comments above.

    打赏 评论

相关推荐 更多相似问题