0

読んでくれてありがとう。

コメントリストがあります。ユーザーが返信リンクをクリックすると、フォームが表示されます。次にjqueryを使用して、キャンセルで返信リンクを変更します。キャンセルをクリックするとフォームが非表示になりますが、もう一度クリックすると表示と非表示が切り替わります。

http://jsfiddle.net/Zv3uy/10/これは私のコードでのアクションです。

このアプローチは正しいですか？私は学ぼうとしています。

ここにコードがあります。

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>
4

2 に答える 2

3

クリックするたびに、別のクリック イベントをリンクにバインドしています。

私はそのようにします：

$(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>');
            });
        }
    });
});

このようにして、1つだけを持ちclick、より整頓されます（より整頓されますか？）。

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

于 2013-09-20T10:28:40.887 に答える
0

新しいイベントをバインドする前に、古いイベントのバインドを解除する必要があります

$('.reply-comment').off('click').on('click', function(e){
于 2013-09-20T10:25:01.913 に答える