Question

感谢阅读。

我有一个评论列表。和用户点击回复链接表格出来。然后使用jquery我更改回复链接取消。当您单击取消时，它会隐藏表单，但当您再次单击时，它会显示并隐藏。

这种方法对吗？我正在努力学习。

这是代码。

的JavaScript

$(function(){
    $('.reply-comment').on('click', function(e){
        var CommentID = $(this).attr('id');
        e.preventDefault();

        $(this).next('.reply-form').show(function(){
            $('#'+CommentID).html('<a href="" class="reply-comment" id="reply-comment-'+CommentID+'"> Cancel </a>');

            $('.reply-comment').on('click', function(e){
                e.preventDefault();

                $(this).next('.reply-form').hide(function(){
                    $('#'+CommentID).html('<a href="" class="reply-comment" id="reply-comment-'+CommentID+'"> Reply </a>');
                });
            });

        });
    });
});

HTML

<div>comments text etc etc...</div>
<a href="" class="reply-comment" id="2"> Reply </a>
<div class="reply-form well">
    <form name="reply-form" id="reply-form" method="POST">
        <textarea name="Comment" rows="6" class="span10"></textarea> <br /><br />
        <input type="submit" class="btn btn-primary replycommentsubmitbutton" value="Reply" />
    </form>
</div>

Answer 1

每次点击都会将另一个点击事件绑定到链接。

我会这样做：

$(function () {
    $('.reply-comment').on('click', function (e) {
        e.preventDefault();
        var $form = $(this).next('.reply-form');
        var CommentID = $(this).attr('id');

        if ($form.is(':visible')) {
            // hide it
            $form.hide(function () {
                $('#' + CommentID).html('<a href="" class="reply-comment" id="reply-comment-' + CommentID + '"> Reply </a>');
            });
        } else {
            // show it
            $form.show(function () {
                $('#' + CommentID).html('<a href="" class="reply-comment" id="reply-comment-' + CommentID + '"> Cancel </a>');
            });
        }
    });
});

这样你只有一个click而且它更整洁（更整洁？）。

http://jsfiddle.net/Zv3uy/12/

Answer 2

您应该在绑定新事件之前取消绑定旧事件

$('.reply-comment').off('click').on('click', function(e){

在使用jquery显示onclick后隐藏

2 个答案: