如何使用 js 更新 blade laravel 中 foreach 的变量

Question

我有一个页面可以加载我的数据库中可用的文件夹和文件：

如图所示，第一次加载的文件使用以下代码加载所有文件夹中的所有可用文件：

public function index(){
        $folders = Folder::where('user_id', '=', auth()->id())->get();
        $data = collect();
        $filator = collect();

        // loop around the folders
        foreach ($folders as $f){
            $files = DB::table('files')
                ->where("folder_id",'=',$f->id)->count();
            // loop around the files in all folders
            foreach ($f->file as $filatov){
                $filator->push([
                    'fname' => $filatov->path,
                    'id_file' => $filatov->id
                ]);
            }

            $data->push([
                'id' => $f->id,
                'name' => $f->name,
                'count' => $files,
            ]);
        }

        return view('pages.folders',['data'=>$data,'filatov'=>$filator]);
    }

一切正常，但现在我想要每个例子点击“眼睛”按钮我显示存储在特定文件夹中的文件，在以下代码中我可以使用以下代码获取文件：

public function getFiles(Request $request){
        $folder = Folder::find($request->id);
        $filator = collect();

        foreach ($folder->file as $filatov){
            $filator->push([
                'fname' => $filatov->path,
                'id_file' => $filatov->id
            ]);
        }

        return response()->json($filator);
    }

我可以用 Ajax 这样的请求来操作它：

$("#getfolder").click(function(e){
            $.ajax({
                url: "{{route('get.files')}}",
                method: "get",
                headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
                data: {id:$('#getfolder').val()},
                success: function (data) {
                    alert(data[0].fname)
                }
            })
        });

我可以得到结果：

现在，我想知道我是否可以只用 JS 更新变量 $filatov，因为我可以在该代码中从我的请求中获取数据，这样我就可以在单击时显示特定文件夹中的文件：

<div class="row">
                @foreach($filatov as $d)
                    <div class="col-md-6">
                        <div class="card mt-1">
                            <div class="card-content py-50 px-1 folder-info">
                                <div class="d-flex justify-content-between align-items-center mb-1">
                                    <span><i class="feather icon-file-text font-medium-5"></i></span>
                                </div>
                                <div class="row align-items-center">
                                    <div class="col-md-10">
                                        <h6 class="font-medium-2 mb-0">{{$d['fname']}}</h6>
                                    </div>
                                    <div class="col-md-2">
                                        <button value="{{$d['id_file']}}" type="button" id="download" class="btn btn-sm btn-icon btn-success waves-effect waves-light"><i class="feather icon-download"></i></button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>

提前感谢您的帮助！

Answer 1

我终于找到了不使用 Ajax 但只使用 jquery 的方法，感谢@Swati，所以你必须使用类和 ids :

Blade代码

@foreach($filatov as $d)
    <div class="col-md-6 folder" id="test{{$d['id_folder']}}" style="display: none">
        <div class="card mt-1">
            <div class="card-content py-50 px-1 folder-info">
                <div class="d-flex justify-content-between align-items-center mb-1">
                    <span><i class="feather icon-file-text font-medium-5"></i></span>
                </div>
                <div class="row align-items-center">
                    <div class="col-md-10">
                        <h6 class="font-medium-2 mb-0">{{$d['fname']}}</h6>
                    </div>
                    <div class="col-md-2">
                        <button value="{{$d['id_file']}}" type="button" class="download btn btn-sm btn-icon btn-success waves-effect waves-light"><i class="feather icon-download"></i></button>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endforeach

JS代码：

$(".getfolder").click(function(e){
   var id = $(this).val();
   var target = '.folder';
   $(target + '#test' + id).css('display', 'block');
   $(target).not('#test' + id).css('display', 'none');
});

如何使用 js 更新 blade laravel 中 foreach 的变量

How to update variable on a foreach in blade laravel with js

arrays

ajax

json

laravel

laravel-blade

Blade代码

JS代码：