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

Posted 2023-03-14

【中文标题】在刀片 foreach 循环中使用 JS 动态更改 div CSS 背景

【英文标题】：Dynamically change div CSS background using JS within blade foreach loop

【发布时间】：2014-02-06 10:49:09

【问题描述】：

我正在尝试使用 Laravel 4 在 photos.index 视图上显示用户创建的图像。如下所示，我正在使用 foreach 浏览这些图片。但是，由于我想让它们显示在 300 像素高度和 300 像素宽度的框中，我在我的“框”类中使用了 CSS 背景方法“封面”。

现在我必须使用 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

现在我的问题是：我需要做些什么来单独更改每个框的背景图片？

如果我使用开发人员工具打开网站，我看到的那些 JavaScript 确实具有指向应该显示的图片的正确链接，这可能很重要。但是，每个 div 的 CSS 背景始终是 DB 中的最后一张图片。

【问题讨论】：

首先告诉我你对src 的imgages 有什么，我会进一步提供帮助。

我有一个数据库，如果用户发布图片，它会存储图像名称和扩展名。即存储在“source_name”字段中所有图片都存储在img/user_images/images/中。

【参考方案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>

【讨论】：

在我看来你在 Lararvel 方面相当出色。也许你对这个话题也有一些想法..***.com/questions/21200492/…

【参考方案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

【讨论】：

这种给我一个奇怪的结果。我再也看不到任何图片了。

try style="background-image: url( url('img/user_images/images/'.$photo->source_name) )"

在我看来你在 Lararvel 方面相当出色。也许你对这个话题也有一些想法..***.com/questions/21200492/…