Question

我正试图实施评论系统。现在我有关于JS和onClick函数的问题。首先是代码：

<ul class="comments">
            <li>
                <div class="comment">
                    <div class="img-thumbnail" style="margin-left: -98px;">
                        <img class="avatar" alt="" src="img/avatars/noAvatar.jpg" style="width:50px;height:50px;">
                    </div>
                    <div class="comment-block-new" style="background-color:#fff;">
                        <div class="post-leave-comment" style="border:0px; margin:0px; padding:0px;">
                            <form action="" method="post">
                                <div class="row">
                                    <div class="form-group">
                                        <div class="col-md-12">
                                            <textarea maxlength="500" rows="1" class="form-control" name="comment" id="comment" onClick="expandComment(this,this.form);">Post your comment...</textarea>
                                        </div>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </li>

和functions.js

function expandComment(inputC,formC){
    inputC.innerHTML = '';

    var showReplyOptions = '<div class="row" id="commentUserInfo" data-appear-animation="fadeInDown">'
    +                                '<div class="form-group">'
    +                                    '<div class="col-md-4">'
    +                                        '<label>Your name</label>'
    +                                        '<input type="text" value="" maxlength="100" class="form-control" name="name" id="name">'
    +                                    '</div>'
    +                                '</div>'
    +                            '</div>'
    +                            '<div class="row" id="commentPost" data-appear-animation="fadeInDown">'
    +                                '<div class="col-md-12">'
    +                                    '<input type="submit" value="Post Comment" class="btn btn-primary btn-lg" data-loading-text="Loading...">'
    +                                '</div>'
    +                            '</div>';

    formC.innerHTML = formC.innerHTML + showReplyOptions;
}

现在我想扩展功能只运行一次。我需要创建ID的动态扩展和即将到来的回复系统。怎么做？

提前谢谢。

Answer 1

您是否尝试为其添加标记？

var bExpandFunctionRunned = false;

function expandComment(inputC,formC){
    // it won't run again once the flag is set.
    if(bExpandFunctionRunned == false){
        bExpandFunctionRunned = true;

        inputC.innerHTML = '';

        var showReplyOptions = '<div class="row" id="commentUserInfo" data-appear-animation="fadeInDown">'
        +                                '<div class="form-group">'
        +                                    '<div class="col-md-4">'
        +                                        '<label>Your name</label>'
        +                                        '<input type="text" value="" maxlength="100" class="form-control" name="name" id="name">'
        +                                    '</div>'
        +                                '</div>'
        +                            '</div>'
        +                            '<div class="row" id="commentPost" data-appear-animation="fadeInDown">'
        +                                '<div class="col-md-12">'
        +                                    '<input type="submit" value="Post Comment" class="btn btn-primary btn-lg" data-loading-text="Loading...">'
        +                                '</div>'
        +                            '</div>';

        formC.innerHTML = formC.innerHTML + showReplyOptions;
    }
}

Answer 2

分配元素 dataSet 的flag值的最佳方法，当事件调用时，检查flag值函数，如果已经从函数顶部调用return，请参阅下面的代码

function expandComment(inputC,formC){

  /***return event code****/
    if(inputC.dataset.offclickevent === true)
       return;
    else
       inputC.dataset.offclickevent = true;
  /****************/


    inputC.innerHTML = '';

    var showReplyOptions = '<div class="row" id="commentUserInfo" data-appear-animation="fadeInDown">'
                                    '<div class="form-group">'
                                        '<div class="col-md-4">'
                                            '<label>Your name</label>'
                                            '<input type="text" value="" maxlength="100" class="form-control" name="name" id="name">'
                                        '</div>'
                                    '</div>'
                                '</div>'
                                '<div class="row" id="commentPost" data-appear-animation="fadeInDown">'
                                    '<div class="col-md-12">'
                                        '<input type="submit" value="Post Comment" class="btn btn-primary btn-lg" data-loading-text="Loading...">'
                                    '</div>'
                                '</div>';

    formC.innerHTML = formC.innerHTML + showReplyOptions;
}

Javascript onClick事件只有一次？

2 个答案: