Question

目前，我正在尝试实施投票系统，以便用户可以喜欢或不喜欢上传的图片，但是，我正在尝试使用ajax调用，这让我有点困惑。我不知道如何传递用户喜欢的图像的id（在页面上会有很多图像）到ajax调用。在JavaScript文件中，data：imageId当前是空的，因为我不知道如何确定并传递图像的id。

主页视图：

@extends('layouts.app')
@section('content')
    @foreach($images as $image)
        <div class='imageContainer'>
            <div class="stickyContainer blackGradient">
                <h1 class='imageTitle'>{{$image->name}}</h1>
                <img class='uploadedImg' src='{{url("storage/uploads/images/".$image->file_name)}}' alt='Random image'/>
                <a class='specialA' href='{{url("image/".$image->id)}}'></a>
                <div class='votingContainer'>
                    <a href='#'><div class='like'></div></a>
                    <a href='#'><div class='dislike'></div></a>
                </div>
            </div>
        </div>
    @endforeach
    <script>
        var token = '{{ Session:token() }}';
        var urlLike = '{{ route('like') }}';
    </script>
@endsection

JavaScript文件：

$('.like').on('click', function(event){
        event.preventDefault();
        var isLike = event.target.previousElementSibling == null;
        console.log(isLike);
        $.ajax({
            method: 'POST',
            url: urlLike,
            data: {isLike: isLike, imageId: , _token: token}
        })
    });

Answer 1

将图片的ID分配给视图中的like按钮：

 <a href='#'><div class='like' id={{$image->id)}}></div></a>

然后，在javascript中使用image的id到ajax调用。

 imageId= event.target.id;

旁注：在javascript中，我不明白你为什么用这个来取消上一个兄弟：

var isLike = event.target.previousElementSibling == null;

Answer 2

将具有属性值的数据属性作为图像Id添加到像data-imgId="1"这样的图像元素。对于每个图像元素，它应该是唯一的。

<img class='uploadedImg' src='{{url("storage/uploads/images/".$image->file_name)}}' data-imgId="{{$image->id)}}" alt='Random image'/>

然后使用以下脚本

获取图像ID

var imgId = $(this).parents('.stickyContainer').find('.uploadedImg').attr('data-imgId');

不知道如何传递图像的ID，以便我可以在我的ajax调用中使用它

2 个答案: