在blade foreach循环中使用JS动态更改div CSS背景 [英] Dynamically change div CSS background using JS within blade foreach loop

问题描述

请在这里陪我一下。我会尽我所能解释为尽可能简单。

我正在尝试使用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 box = 
 document.getElementsByClassName（box）; 
 $（boxes）.css（'background-image' ，
'url（{{url（'img / user_images / images /'。$ photo-> source_name）}}）'）; 
 
}）; 
 
< article class =col-md-3> 
 
  id =imagecontainerclass =框>< / DIV>< / A> 
 
< / article> 
 
 @endforeach 
 
< / div> 
 
 @endforeach 
  

现在我的问题是：必须要单独更改每个框的背景图像

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

任何帮助都可以，非常感谢。

谢谢！

解决方案这个问题是由您的foreach循环内的JavaScript函数 @foreach（$ row as $ photo）。

  @foreach（$ row as $ photo）
 
< script type =text / javascript> 
 $（function（）{
 
 var box = 
 document.getElementsByClassName（box）; 
 $（boxes）.css（'background-image' ，
'url（{{url（'img / user_images / images /'。$ photo-> source_name）}}）'）; 
 
}）; 
  

每个循环都重写了整个javascript函数，并且由于它有一个getElementsByClassName（box） ;您覆盖所有的盒子div，最后一个图片是由 $ photos-> getCollection（） - > all（）检索的。
要为每个盒子分别设置不同的图像，您应该替换类属性的使用并使用一个id，如下所示：

 < div class =row> 
 
 @foreach（$ row as $ photo）
 
< script type =text / javascript> 
 $（函数（）{
 
 $（＃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> 
  

Please bare with me here for a second. I will do my best to explain as simple as possible.

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.

Any help would much, much appreciated.

Thanks!

解决方案

The problem is given by the use of the javascript function inside your foreach loop @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) }} )');

           });

each loop you are rewriting the whole javascript function, and since it does a getElementsByClassName("box"); you are overriding all the boxes div with the last image retrieved by $photos->getCollection()->all(). To have a different image for each box individually you should replace the use of the class attribute and use an id, like this:

<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>

这篇关于在blade foreach循环中使用JS动态更改div CSS背景的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！