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 }}" ....

循环浏览产品以显示其自身的各个属性

1 个答案: