为什么我的模态显示所有照片而不是一张？答案

【问题标题】：Why does my modal shows all photos and not one?为什么我的模态显示所有照片而不是一张？
【发布时间】：2021-11-06 12:05:01
【问题描述】：

您好，在我看来，我有一个模态框并且有问题，它似乎没有识别我正在选择的 id，它正在显示每张上传的照片，但我只想显示选定的一张。

所以这是我的模态：

<div class="modal fade" id="DetalleTicketView" tabindex="-1" role="dialog" style="z-index: 1050; display:none; width:100%" aria-hidden="true">
            <div class="modal-dialog" role="document" style="max-width:75%;">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">Remito</h5>
                        <button type="button" class="close btn btn-danger" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true"><i class="fas fa-times-circle"></i></span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <table id="example1" class="table table-striped table-responsive" width="100%">
                            
                            <tbody>
                               
                                @foreach($file as $key => $detalleTicket)
                                <tr>                                   
                                    
                                    
                                    
                                    <img src="{{asset('storage/' . $detalleTicket->remitoCliente)}}" alt="">
                                
                                </tr>
                                @endforeach
                            </tbody>
                        
                        </table>
                    </div>
                </div>
            </div>
        
        </div>




</section>

这是我按下的按钮，以便出现模式：

 <a title="Info" id="info" class="btn btn-sm btn-info" data-toggle="modal" data-idUpdate="'.$detalleTicket->id.'" data-target="#DetalleTicketView"><i class="fa fa-eye"></i></a>

所以现在，如果我上传到不同的图片并可视化其中一张，它会向我显示它们都在另一张之上。

DetlleTicketController：

    class DetalleTicketController extends Controller
{
     public function view(){ 
       $file = DetalleTicket::all();
       return view('backend.detalle_ticket.view-detalle-ticket', compact('file'));
}

    public function add(){
      $detalleTicket['tickets'] = Ticket::all();        
      $detalleTicket['products'] = Product::all();
    
      return view('backend.detalle_ticket.add-detalle-ticket', $detalleTicket);
}

public function store(Request $request){
    /*dd($request->all());*/
    $detalleTicket = new DetalleTicket();

    $detalleTicket->ticket_id = $request->ticket_id;
    $detalleTicket->product_id = $request->product_id;
    $detalleTicket->serial_number = $request->serial_number;
    $detalleTicket->quantity = $request->quantity;
    $detalleTicket->commentary = $request->commentary;
    $path = request()->file('remitoCliente')->store('archivos'); 
    $detalleTicket->remitoCliente = $path;
    
    $detalleTicket->save();
    Session::flash('success');
    return redirect()->route('detalles-tickets.view', $path);
}

public function edit($id){
    $data['editData'] = DetalleTicket::find($id);
    $data['tickets'] = Ticket::all();
    $data['products'] = Product::all();
    
    
    return view('backend.detalle_ticket.edit-detalle-ticket', $data);
}

public function update(Request $request, $id){
    $detalleTicket = DetalleTicket::find($id);
    
           
    $detalleTicket->ticket_id = $request->ticket_id;
    $detalleTicket->product_id = $request->product_id;
    $detalleTicket->serial_number = $request->serial_number;
    $detalleTicket->quantity = $request->quantity;
    $detalleTicket->commentary = $request->commentary;
    $path = request()->file('remitoCliente')->store('archivos'); 
    $detalleTicket->remitoCliente = $path;
    
    $detalleTicket->save();
    
    Session::flash('success');
    return redirect()->route('detalles-tickets.view');
}

public function delete($id){
    $detalleTicket = DetalleTicket::find($id);
    $detalleTicket->delete();
    return redirect()->route('detalles-tickets.view');
}

}

【问题讨论】：

您使用的是@foreach($file)，我相信，在 $file 变量中您拥有所有图像。不止是你想要的
显示所有图像是因为您没有在按钮中使用仅检索与所需 id 匹配的数据的功能。
@Atika 但我对产品也做了同样的事情，而且这个工作
@Autista_z 我编辑了问题并添加了我的控制器。让我知道你是否能在其中发现任何错误，因为对我来说这似乎很好。
你的 view 函数返回所有数据，你从来没有使用你的$id，这就是显示所有图像的原因

标签： html laravel laravel-blade

【解决方案1】：

在您的 Modal 中，您默认显示所有图像，因为在 $file 变量中您拥有所有 DetalleTicket。

您必须进行一些 JS/jQuery 更改以仅显示您想要的图像。

例如：为图片添加 ID

@foreach($file as $key => $detalleTicket)
    <tr class="modalImages" id="modalImage-{{ $detalleTicket->id }}">                                   
        <img src="{{asset('storage/' . $detalleTicket->remitoCliente)}}" alt="">
    </tr>
@endforeach

然后在你的 jQuery 模型中打开类似的东西：

$('a').click(function(event){
    $('.modalImages').hide();
    $('#modalImage-' + $(this).data('idUpdate')).show();
});

【讨论】：