0

I am trying to display user created images on a photos.index view using Laravel 4. As you can see below I am using foreach to go through those pictures. However, as I want to have them displayed in boxes 300px height and 300px width I am using the css background method "cover" in my "box" class.

Now I hav to use JS to change the background image of every box according to what is inserted in the database.

The code below gives me the following result: There are as much boxes displayed as I have in my database. However, they all have the same picture, more exactly the picture that is the last one in the database.

@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

Now my question is: What do I have to do to change the background image for each box individually?

It could be important to know that those JavaScripts I see if I open the site with Developer Tools DO have the correct link to the picture that should be displayed. However, the CSS background of every div is always the last picture in the DB.

4

2 回答 2

1

问题是在 foreach 循环中使用 javascript 函数引起的 @foreach($row as $photo)。

 @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"); 您正在使用检索到的最后一个图像覆盖所有框 div $photos->getCollection()->all()。要为每个框分别设置不同的图像，您应该替换使用 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>
于 2014-01-17T07:48:36.617 回答
1

为什么不直接在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
于 2014-01-17T07:49:56.497 回答