Question

我正在使用Laravel 5.1和slick.js。目前我正在显示一个包含3个图像的列（顶部，中间，底部）。在生成列时，我将图片ID添加到<img>标记。

我的目标是让用户能够通过点击＆＃34;保存＆＃34;来保存一组图像，每个图像从顶部/中间/底部各一个。按钮，但我不确定如何识别图像，因为在slick.js中所有图像src都在html页面中，尽管它一次显示一个。

我使用slickCurrentSlide搞砸了但是因为它返回了可用图像的索引而不是图像ID而被卡住了。

<div class="single-item-tops" style="text-align: center;">
   @foreach($tops as $top)
      <div><img src="{{$top->src}}" id="{{$top->id}}" class="img-thumbnail" /></div>
   @endforeach
</div><br>

<div class="single-item-bottoms">
  @foreach($bottoms as $bottom)
   <div><img src="{{$bottom->src}}" id="{{$bottom->id}}" class="img-thumbnail"/></div>
  @endforeach
</div><br>

<div class="single-item-shoes">
    @foreach($shoes as $shoe)
     <div><img src="{{$shoe->src}}" id="{{$shoe->id}}" class="img-thumbnail" /></div>
    @endforeach
</div>

<form method="POST" action="/outfits/create" class="myForm">
   <input type="hidden" name="top" class="top" value="">
   <input type="hidden" name="bottom" value="">
   input type="hidden" name="shoe" value="">
   <button type="submit" class="btn btn-primary disabled btn-block">Save Outfit</button>
</form>

<script type="text/javascript">
   $(document).ready(function(){
     $('.single-item-tops').slick({
         arrows: false,
         adaptiveHeight: true
     });

    //     $('.single-item-tops').on('afterChange', function(event, slick,  currentSlide){
    //   confirm(currentSlide);
    // });
    });

    $(document).ready(function(){
      $('.single-item-bottoms').slick({
        arrows: false,
        adaptiveHeight: true
      });
    });

    $(document).ready(function(){
      $('.single-item-shoes').slick({
        arrows: false,
        adaptiveHeight: true
        });
      });
</script>

Laravel + slick.js：使用表单将图像ID保存到数据库

0 个答案: