Question

我正在尝试读取以下html元素的postid属性（在循环内），但始终为null。我可以在开发工具控制台（chrome）中打印该元素的内容，而不会出现任何问题。预先感谢！

<section class="row posts">
        <div class="col-md-6 col-md-3-offset">
            <header><h3>other posts</h3></header>
            @foreach($posts as $post)
            <article class="post" data-postid = "{{ $post->id }}">
                <p>{{ $post->content }}</p>
                <div class="info">Posted by {{ $post->user->username }} on {{ $post->created_at }}</div>
                <div class="interaction">
                    <a href="#">Like</a>
                    @if(Auth::user() == $post->user)
                        |
                        <a href="#" class="edit">Edit</a> |
                        <a href="{{ route('post.delete',['post_id' => $post->id]) }}">Delete</a>
                    @endif
                </div>
            </article>
            @endforeach
        </div>
    </section>
<script>
        var token = '{{ Session::token() }}';
        var url = '{{ route('edit') }}';
    </script>

使用以下javascript在控制台中打印出来：

var postId = 0;

$('.post').find('.interaction').find('.edit').on('click',function(event){
   event.preventDefault();
   var postBody = event.target.parentNode.parentNode.childNodes[1].textContent;
   postId = event.target.parentNode.parentNode.dataset['postid'];
   $('#post-content').val(postBody);
   $('#edit-post').modal();
});

$('#modal-save').on('click',function(){
   $.ajax({
      method: 'POST',
      url: url,
      data: {body: $('#post-content').val(), postId: postId, _token: token}
   })
    .done(function (msg){
       console.log(msg['message']);
    })
});

路线：

Route::post('/edit', function (\Illuminate\Http\Request $request)
    {
        return response()->json(['message' => $request['postId']]);
    })->name('edit');

我可以在控制台上打印帖子的正文，但是没有postid属性的运气。

Answer 1

您可以使用jQuery的.closest()获取.post元素，然后查询该元素。

此外，您不需要一个接一个地做两个.find()。一个就足够了。突出指定正确的孩子。

$('.post').find('.interaction .edit').on('click',function(event){
   event.preventDefault();
   var post = $(this).closest('.post');
   var postBody = post.find('.info').text();
   postId = post.data('postid');
   $('#post-content').val(postBody);
   $('#edit-post').modal();
});

Answer 2

通过在html中将data-postid属性从<article class="post">移到<a href="#" class="edit" data-postid="{{ $post->id }}">Edit</a>来解决了这个问题。

随后将javascript的on click事件更新为以下内容：

$('.post').find('.interaction').find('.edit').on('click',function(event){
   event.preventDefault();
   var postBody = event.target.parentNode.parentNode.childNodes[1].textContent;
   //postId = event.target.parentNode.parentNode.dataset['postid'];
   postId = event.target.dataset.postid;
   $('#post-content').val(postBody);
   $('#edit-post').modal();
});

谢谢！

无法读取html元素数据属性

2 个答案: