Question

请在这里和我一起露出一秒钟。我将尽力解释尽可能简单。

我正在尝试使用Laravel 4在photos.index视图上显示用户创建的图像。如下所示，我使用foreach来浏览这些图片。但是，因为我想将它们显示在300px高度和300px宽度的框中，我在我的“box”类中使用css背景方法“cover”。

现在我要根据数据库中插入的内容使用JS来更改每个框的背景图像。

下面的代码给出了以下结果：显示的数据框与我在数据库中的数量相同。但是，它们都具有相同的图像，更准确地说是数据库中最后一张图像。

@foreach(array_chunk($photos->getCollection()->all(), 4) as $row)

      <div class="row">

          @foreach($row as $photo)

           <script type="text/javascript">
           $(function(){

           var boxes =
           document.getElementsByClassName("box");
           $(boxes).css('background-image',
           'url({{ url('img/user_images/images/'. $photo->source_name) }} )');

           });

           <article class="col-md-3">

           <a href="{{ url('photos/'. $photo->id) }}"><div
           id="imagecontainer" class="box"></div></a>

           </article>

         @endforeach

     </div>

@endforeach

现在我的问题是：如何逐个更改每个框的背景图片？

重要的是要知道，如果我使用开发人员工具DO打开网站，我看到的那些JavaScripts具有应该显示的图片的正确链接。但是，每个div的CSS背景始终是数据库中的最后一张图片。

任何帮助都会非常感激。

谢谢！

Answer 1

通过在foreach循环@foreach($row as $photo)中使用javascript函数来解决问题。

 @foreach($row as $photo)

           <script type="text/javascript">
           $(function(){

           var boxes =
           document.getElementsByClassName("box");
           $(boxes).css('background-image',
           'url({{ url('img/user_images/images/'. $photo->source_name) }} )');

           });

你正在重写整个javascript函数的每个循环，因为它执行getElementsByClassName（“box”）;您将覆盖$photos->getCollection()->all()检索到的最后一个图像的所有框div。要为每个框分别创建不同的图像，您应该替换class属性的使用并使用id，如下所示：

<div class="row">

          @foreach($row as $photo)

           <script type="text/javascript">
           $(function(){

           $("#box-{{$photo->id}}").css('background-image',
           'url({{ url('img/user_images/images/'. $photo->source_name) }} )');

           });
    </script>
           <article class="col-md-3">

           <a href="{{ url('photos/'. $photo->id) }}"><div
           id="box-{{$photo->id}}" class="box"></div></a>

           </article>

         @endforeach

     </div>

Answer 2

为什么不直接在html上设置背景？

 @foreach($row as $k => $photo)
   <article class="col-md-3">

   <a href="{{ url('photos/'. $photo->id) }}">
       <div style="background-image: {{ url('img/user_images/images/'. $photo->source_name) }}" id="imagecontainer_{{$k}}" class="box"></div>
   </a>

   </article>

 @endforeach

在刀片foreach循环中使用JS动态更改div CSS背景

2 个答案: