Question

我正在用AJAX编辑我的评论;更新评论后，我想向下滚动到更新的评论：

$("#aggiorna").click(function(){

    var value = $("#id").val();
    var dato = $("#comment_edit").val();
    var dato1 = $("#user_id").val();
    var dato2 = $("#article_id").val();
    var dato3 = $("#product_id").val();
    var route = "http://localhost:8000/comment/"+value+"";
    var token = $("#token").val();

    $.ajax({
        url: route,
        headers:{'X-CSRF-TOKEN':token},
        type: 'PUT',
        dataType: 'json',
        data: {content: dato,
               user_id: dato1,
               article_id: dato2,
               product_id: dato3,},
        success: function(){
            carga();
            $('#myModal').modal('hide');

            $("#msj-success-updated").fadeIn();

        }

    });


});

$("#aggiorna").click(function() {
            $('html, body').animate({
                scrollTop: $("#"+value+"").offset().top
            }, 2000);
});

我想滚动到：

<div id="id of my comment">

我正在使用此代码滚动：

scrollTop: $("#"+value+"").offset().top

其中

var value = $("#id").val();

我的评论ID已更新，可能scrollTop错误，我不知道。我该如何解决？谢谢您的帮助！

我有：

    <div class="comment">
    <a class="comment-avatar" href="{{url($comment->user->username)}}">
        <img class="avatar-image-comments" src="{{url($comment->user->profile)}}" width="60" alt="">
    </a>

    <div class="comment-body">
        <strong>{{ $comment->user->username }}</strong>
        <h7 class="comment-date">  -  commentato il {{ $comment->created_at }}</h7>
        <p class="comment-text">{{ $comment->content }}</p>
        <input type="hidden" id="{{$comment->id}}">

        @if(Auth::check())
            @if(Auth::user()->id == $comment->user->id || Auth::user()->usertype == 3 )
                <div class="reply">
                    <div class="inline">
                        <button type="button" value="{{ $comment->id }}" onclick="Mostrar(this)" id="id_comment" class="btn btn-circle btn-dark btn-xs btn-outline" data-toggle="modal" data-target="#myModal">
                            <span>editare</span>
                        </button>                      

                    </div>
                    <div class="inline">{!! Form::open(['route'=>['comment.destroy',$comment->id]]) !!}
                        <input type="hidden" name="_method" value="DELETE">
                        <button type="submit" class="btn btn-circle btn-dark btn-xs btn-outline">
                            <span>Elimina</span>
                        </button>
                        {!! Form::close() !!}
                    </div>
                </div>
            @endif
        @endif
    </div>
</div>

我的输入隐藏帮助我获取我要编辑的评论ID，这有助于我的控制器更新正确的评论ID。

Answer 1

在您的代码中，value应该是您要滚动到的评论的ID。

$("#aggiorna").click(function() {
            $('html, body').animate({
                scrollTop: $("#"+value+"").offset().top
            }, 2000);
});

看一下这个例子：

$(function() {
  $("#scrl_btn").click(function() {
    $('html,body').animate({
      scrollTop: $("#second").offset().top
    }, 'slow');
  });
});

.first {
  height: 1500px;
  width: 200px;
  background-color: blue;
  color: white;
}
.second {
  height: 150px;
  width: 200px;
  background-color: green;
  color: white;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button id="scrl_btn">
  Scroll to second div
</button>
<div class="first" id="first">
  1st div
</div>
<div class="second" id="second">
  2nd div
</div>

在您的代码中，您编写了两次点击方法，首先您创建了一个本地 var：value，并且您正在尝试使用它第二次点击方法。在第二种方法中，您需要添加此var value = $("#id").val();

使用ajax

1 个答案: