提问者:小点点

弹出框和每个表行上的内容


原始代码

<tbody id="table">
                            @foreach($services as $service)
                                    <tr>
                                        <td colspan="7" class="theme-bg" style="color:white">{{ $service->name }}
                                          @if($service->brand != '')
                                            <span style="font-family:'Font Awesome 5 Brands','FontAwesome';">&#x{{ $service->brand }};</span>
                                          @endif
                                        </td>
                                    </tr>
                                    <tr>
                                        <th>@lang('general.package_id')</th>
                                        <th>@lang('general.name')</th>
                                        <th>@lang('general.price_per_item') {{ getOption('display_price_per') }}</th>
                                        <th>@lang('general.minimum_quantity')</th>
                                        <th>@lang('general.maximum_quantity')</th>
                                        <th>@lang('general.description')</th>
                                    </tr>
                                    @foreach($packages as $package)
                                        @if(isset($categories[$service->id]) && in_array($package->category_id,explode(',',$categories[$service->id])))
                                        <tr>
                                            <td>{{ $package->id }}</td>
                                            <td>{{ $package->name }}</td>
                                            <td>
                                                @php
                                                    $price = isset($userPackagePrices[$package->id]) ? $userPackagePrices[$package->id] : $package->price_per_item;
                                                @endphp
                                                {{ getOption('currency_symbol') . number_format(($price * getOption('display_price_per')),2, getOption('currency_separator'), '') }}
                                            </td>
                                            <td>{{ $package->minimum_quantity }}</td>
                                            <td>{{ $package->maximum_quantity }}</td>
                                            <td style="white-space: pre-line">{{ $package->description }}</td>

                                        </tr>



                                        @endif
                                    @endforeach
                            @endforeach
                        </tbody>

我试图用一个按钮替换“{{$Package->Description}}”,以便在一个新的弹出窗口中显示内容。

null

<tbody id="table">
   @foreach($services as $service)
   <tr>
      <td colspan="7" class="theme-bg" style="color:white">{{ $service->name }}
         @if($service->brand != '')
         <span style="font-family:'Font Awesome 5 Brands','FontAwesome';">&#x{{ $service->brand }};</span>
         @endif
      </td>
   </tr>
   <tr>
      <th>@lang('general.package_id')</th>
      <th>@lang('general.name')</th>
      <th>@lang('general.price_per_item') {{ getOption('display_price_per') }}</th>
      <th>@lang('general.minimum_quantity')</th>
      <th>@lang('general.maximum_quantity')</th>
      <th>@lang('general.description')</th>
   </tr>
   @foreach($packages as $package)
   @if(isset($categories[$service->id]) && in_array($package->category_id,explode(',',$categories[$service->id])))
   <tr>
      <td>{{ $package->id }}</td>
      <td>{{ $package->name }}</td>
      <td>
         @php
         $price = isset($userPackagePrices[$package->id]) ? $userPackagePrices[$package->id] : $package->price_per_item;
         @endphp
         {{ getOption('currency_symbol') . number_format(($price * getOption('display_price_per')),2, getOption('currency_separator'), '') }}
      </td>
      <td>{{ $package->minimum_quantity }}</td>
      <td>{{ $package->maximum_quantity }}</td>
      <td><button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalCenter">+ Description</button></td>
   </tr>
   <div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
      <div class="modal-dialog modal-dialog-centered" role="document">
         <div class="modal-content">
            <div class="modal-header">
               <button type="button" class="close" data-dismiss="modal" aria-label="Close">
               <span aria-hidden="true">&times;</span>
               </button>
            </div>
            <div class="modal-body">
               <p style="white-space: pre-line">{{ $package->description }}</p>
            </div>
            <div class="modal-footer">
               <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            </div>
         </div>
      </div>
   </div>
   @endif
   @endforeach
   @endforeach
</tbody>

null

但是我在每个按钮上获得相同的内容,但是内容必须是不同的,因为每一行都赢得了服务名称+描述。 弹出框上的此描述必须不同。


共1个答案

匿名用户

该问题可能是由您的Model-ID引起的。 由于您的所有modals都有id“ExampleModalCenter”,所以您的按钮可能只打开它能找到的第一个(因为id应该是唯一的)。 如果要动态更改modal-ID和相应的Button-target

添加包ID的示例:

null

<tbody id="table">
   @foreach($services as $service)
   <tr>
      <td colspan="7" class="theme-bg" style="color:white">{{ $service->name }}
         @if($service->brand != '')
         <span style="font-family:'Font Awesome 5 Brands','FontAwesome';">&#x{{ $service->brand }};</span>
         @endif
      </td>
   </tr>
   <tr>
      <th>@lang('general.package_id')</th>
      <th>@lang('general.name')</th>
      <th>@lang('general.price_per_item') {{ getOption('display_price_per') }}</th>
      <th>@lang('general.minimum_quantity')</th>
      <th>@lang('general.maximum_quantity')</th>
      <th>@lang('general.description')</th>
   </tr>
   @foreach($packages as $package)
   @if(isset($categories[$service->id]) && in_array($package->category_id,explode(',',$categories[$service->id])))
   <tr>
      <td>{{ $package->id }}</td>
      <td>{{ $package->name }}</td>
      <td>
         @php
         $price = isset($userPackagePrices[$package->id]) ? $userPackagePrices[$package->id] : $package->price_per_item;
         @endphp
         {{ getOption('currency_symbol') . number_format(($price * getOption('display_price_per')),2, getOption('currency_separator'), '') }}
      </td>
      <td>{{ $package->minimum_quantity }}</td>
      <td>{{ $package->maximum_quantity }}</td>
      <td><button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalCenter-{{ $package->id }}">+ Description</button></td>
   </tr>
   <div class="modal fade" id="exampleModalCenter-{{ $package->id }}" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
      <div class="modal-dialog modal-dialog-centered" role="document">
         <div class="modal-content">
            <div class="modal-header">
               <button type="button" class="close" data-dismiss="modal" aria-label="Close">
               <span aria-hidden="true">&times;</span>
               </button>
            </div>
            <div class="modal-body">
               <p style="white-space: pre-line">{{ $package->description }}</p>
            </div>
            <div class="modal-footer">
               <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            </div>
         </div>
      </div>
   </div>
   @endif
   @endforeach
   @endforeach
</tbody>