Question

我在我们的清单中添加了jQuery Mobile v1.2.0，以便为移动设备添加幻灯片功能。这是我的展示住宿模板：

:javascript
  $(document).ready(function() {
     $("#myCarousel").swiperight(function() {
        $("#myCarousel").carousel('prev');
      });
     $("#myCarousel").swipeleft(function() {
        $("#myCarousel").carousel('next');
     });
  });

图片：

#myCarousel.carousel.slide
            .carousel-inner
              - @house.attachments.each_with_index do |a, index|
                %div{ :class => "#{index == 0 ? 'active item' : 'item'}" }
                  = link_to(image_tag(a.file.url), photo_country_region_house_path(@country, @region, @house) )



            %a.carousel-control.left
              %i.fa.fa-arrow-circle-left.fa-2x{"data-slide" => "next", :href => "#myCarousel"}
            %a.carousel-control.right
              %i.fa.fa-arrow-circle-right.fa-2x{"data-slide" => "prev", :href => "#myCarousel"}

这适用于1个住宿。但是我该如何处理我的列表页面？

这是我的代码：

- @houses.each do |house|
          .item.col-sm-4.col-lg-4.col-md-4.col-xs-6{:class => house.features_to_html_class, data: {name: house.name, myorder: house.bedrooms, ranking: house.sorting} } 

            .product
              .image
                .thumbnail

                  .carousel.slide{id: "myCarousel#{house.id}"}
                    / Carousel items
                    .carousel-inner
                      - house.attachments.limit(3).each_with_index do |a, index| 
                        %div{ :class => "#{index == 0 ? 'active item' : 'item'}" }
                          = link_to(image_tag(a.file.url), country_region_house_path(house.country, house.region, house))


                    %a.carousel-control.left
                      %i.fa.fa-arrow-circle-left{"data-slide" => "next", :href => "#myCarousel#{house.id}"}
                    %a.carousel-control.right
                      %i.fa.fa-arrow-circle-right{"data-slide" => "prev", :href => "#myCarousel#{house.id}"}

我如何实现javascript代码？列表中的轮播ID都不同。

Thanks..remco

Answer 1

我的解决方案可能看起来很奇怪，但这会正确绑定Carousel

- @houses.each do |house|
  .item.col-sm-4.col-lg-4.col-md-4.col-xs-6{:class => house.features_to_html_class, data: {name: house.name, myorder: house.bedrooms, ranking: house.sorting} } 
    .product
      .image
        .thumbnail
          .carousel.slide{id: "myCarousel#{house.id}"}
            / Carousel items
            .carousel-inner
              - house.attachments.limit(3).each_with_index do |a, index| 
                %div{ :class => "#{index == 0 ? 'active item' : 'item'}" }
                  = link_to(image_tag(a.file.url), country_region_house_path(house.country, house.region, house))
            %a.carousel-control.left
              %i.fa.fa-arrow-circle-left{"data-slide" => "next", :href => "#myCarousel#{house.id}"}
            %a.carousel-control.right
              %i.fa.fa-arrow-circle-right{"data-slide" => "prev", :href => "#myCarousel#{house.id}"}
  :javascript
    $(document).ready(function() {
       $("#myCarousel#{house.id}").swiperight(function() {
          $("#myCarousel#{house.id}").carousel('prev');
        });
       $("#myCarousel#{house.id}").swipeleft(function() {
          $("#myCarousel#{house.id}").carousel('next');
       });
    });

添加幻灯片功能以乘以项目

1 个答案: