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

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

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

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);
    }

一切正常，但现在我希望每个示例单击“eye”按钮，显示存储在特定文件夹中的文件，在以下代码中，我可以使用以下代码获取文件：

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>

@foreach（$filatov作为$d）
{{$d['fname']}
@endforeach

---

提前感谢您的帮助

由于@Swati，我终于找到了不用Ajax而只使用jquery的方法，因此您必须使用类和ID：

刀片代码

---

我认为你不需要在这里使用

ajax

，正如你所说，所有文件和文件夹都显示在你的页面中，你已经可以隐藏

文件

div，只要点击

eye

按钮，就可以显示使用js隐藏的div。嗯，好吧，这样说似乎更好，我会尝试一下，谢谢你的支持