如何使用 js 在刀片 laravel 中的 foreach 上更新变量

Posted 2023-03-14

【中文标题】如何使用 js 在刀片 laravel 中的 foreach 上更新变量

【英文标题】：How to update variable on a foreach in blade laravel with js

【发布时间】：2021-03-05 07:32:12

【问题描述】：

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

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

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>

提前感谢您的帮助！

【问题讨论】：

我认为您不需要在这里使用ajax，因为您说所有文件和文件夹都已显示在您的页面中，您可以隐藏files div，并且每当点击eye 按钮时显示使用 js 隐藏的 div。

嗯好吧，这样说比较好，我试试，谢谢支持

【参考方案1】：

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

刀片代码

@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');
);