0

Laravel 4 を使用して、ユーザーが作成した画像を photos.index ビューに表示しようとしています。以下に示すように、foreach を使用してこれらの画像を表示しています。ただし、高さ300px、幅300pxのボックスに表示したいので、「ボックス」クラスで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 の最後の画像です。

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 に答える