如何使用jquery隐藏父div中的任何子元素

时间:2017-10-30 11:26:09

标签: javascript php jquery html

我有两种情况,一种是有评论,另一种是没有。我用php分隔了两个案例:

    <div class="box">
        <textarea required id="reviews_comment" name="comment" value="<?php echo $this->input->post('comment'); ?>" ></textarea>
        <button style="display: none;" id="comment_button" class="btn btn-success"  >Add Comment</button>
        <div id="comment_div">
        <b>Comments...</b></br>
        <?php if($comment_data){ foreach ($comment_data as $data) {?>
        <b>By: <span><?php echo $data->first_name.' '.$data->last_name; ?></span></b>
        <p><?php echo $data->comment; ?></p>
        <?php } } else{?>
        <div id="no_comment_case" ><h1>No comments yet...</h1></div>
        <?php } ?>
    </div>

现在没有评论时不会显示评论案例。用户使用ajax发布评论后,我尝试使用以下代码隐藏无评论案例并仅附加最近的评论,但不会隐藏无评论案例。 jquery代码是:

      success: function(msg){
                console.log(msg);
                if(msg=="success")
                {
                   $('#comment_button').hide();
                   $('#reviews_comment',$('#comment_div')).hide();
                   // $('div#comment_div> div:eq(2)').css("display", "none");
                   html='<b>By: <span>'+username+'</span></b><p>'+review+'</p>';
                   $('#comment_div').append(html);

                }

              }

我该怎么办?任何建议都非常感谢。感谢。

1 个答案:

答案 0 :(得分:1)

Enclose comment_div properly,

<div class="box">
            <textarea required id="reviews_comment" name="comment" value="<?php echo $this->input->post('comment'); ?>" ></textarea>
            <button style="display: none;" id="comment_button" class="btn btn-success"  >Add Comment</button>
            <div id="comment_div">
            <b>Comments...</b></br>

            <?php if($comment_data){ foreach ($comment_data as $data) {?>
                <b>By: <span><?php echo $data->first_name.' '.$data->last_name; ?></span></b>
                <p><?php echo $data->comment; ?></p>
            <?php } 
            } else{?>
                <div id="no_comment_case" ><h1>No comments yet...</h1></div>
            <?php } ?>

            </div>
        </div>

    Ajax call:

    success: function(msg){
                    if(msg=="success")
                    {
                       $('#comment_button').hide();
            $('#reviews_comment,#comment_div,#no_comment_case').hide();
                       html='<b>By: <span>'+username+'</span></b><p>'+review+'</p>';
                       $('#comment_div').append(html);

                    }

                  }