循环浏览产品以显示它自己的个人属性

Question

我有一个 laravel 购物车应用程序，并试图实现一个更多信息按钮，它显示一个带有产品描述的模式弹出窗口。我正在使用 foreach 循环来获取项目并在循环中输出更多信息按钮。下一个产品的描述不会改变，它仍然是第一个产品的描述。我希望每个项目都显示它自己的描述。

查看：

@extends('Layout.master')

@section('content')

<h2>Video Games</h2>

<hr>
@foreach($products->chunk(4) as $productChunk)

   @foreach ($productChunk as $product)

<article class="product">

    <div class="productHeader">

        <img src="{{$product->imagePath}}" id="product-img" alt="" class="img-responsive"  />
        <br/>
        <h5>{{$product->title}}</h5>

 <h5>{{$product->format}}</h5>

    </div>

    <div class="productContent">

  <p class="lead"> &pound;{{$product->price}}</p>

          <a class="btn btn-primary pull-right btn-block" data-toggle="modal" data-target="#myModal" href="{{ URL::to('', $product->id)}}">More Info</a>

      <a class="btn btn-success pull-right btn-block" href="{{ route('product.addToCart', ['id' => $product->id])}}">Add to cart</a>

    </div>

</article>

<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
  <div class="modal-dialog">

    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header" style="background-color:#CCD1D1;">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title text-center">Description</h4>
      </div>

      <div class="modal-body">
        <p> {{$product->description}}</p>
      </div>
      <div class="modal-footer" style="background-color:#CCD1D1;">
        <button type="button" style="background-color: #1B4F72; color:#fff;" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>

  </div>
</div>

@endforeach

@endforeach


@endsection

Answer 1

您需要为每个打开模态的链接设置一个唯一的 ID：

data-target="#myModal{{ $product->id }}" ....

对于模态本身：

<div id="myModal{{ $product->id }}" ....