1

店舗で入手可能なブランドをスクロールする JCarousel があります。ストア内の別のページから取得したブランドのリンク、名前、および画像 (CMS により、このデータへのアクセスは別の方法で制限されます)。

ブランド データを取得し、<li>エントリをフォーマットして JCarousel に追加しています。そして、最終的に何が起こるかというと、カルーセルには「プレースホルダー<li>」とリストに追加されたものが含まれていますが、常にビューの下にあります。エントリの構文は<li>正しいように見えますが、JCarousel で作成されたプレースホルダの代わりにこれらをロードできないようです。

そして、いくつかの調査と試行錯誤の後、私は立ち往生しているので、助けていただければ幸いです.

私の HTML / JS は次のようになります。

<div class="Block Moveable Panel" id="BrandsJCarousel">

    <link rel="stylesheet" type="text/css" href="/content/jcarousel.css">
    <script type="text/javascript" src="/content/jquery.jcarousel.min.js"></script>

    <div class=" jcarousel-skin-tango">
        <div class="jcarousel-container jcarousel-container-horizontal" style="position: relative; display: block;">
            <div class="jcarousel-clip jcarousel-clip-horizontal" style="position: relative;">
                <ul id="brands" class="jcarousel-list jcarousel-list-horizontal" style="overflow: hidden; position: relative; top: 0px; margin: 0px; padding: 0px; left: -850px; width: 1205px;">
                      **// LIST NEEDS TO APPEAR IN HERE**
                </ul>
            </div>
            <div class="jcarousel-prev jcarousel-prev-horizontal" style="display: block;"></div>
            <div class="jcarousel-next jcarousel-next-horizontal" style="display: block;"></div>
        </div>
        <script type="text/javascript">    
            $(document).ready(function() {
                $.ajax({url: "/brands"}).done(function ( data ) {
                    var html = $(data);
                    var items = $('.SubBrandListGrid li', html);
                    items.each(function() {
                        var link = $('a', this);
                        if(link){
                            var librand = "<li><a href=" + $(link).attr('href') + "><img src=" + $('img', this).attr('src') + " width='60' height='60' alt='" + $(link).text() + "'/></a></li>";
                            $("#brands").append(librand);
                        }                                
                    });                             
                });
            });
        </script>
        <script type="text/javascript">
            $(document).ready(function() {
                jQuery('#brands').jcarousel({
                    auto: 10,
                    scroll: 8,
                    wrap: 'circular'
                });
            });
        </script>    

    </div>  
</div>

（Chrome Inspectから）リストに実際に読み込まれるのは次のとおりです。

<ul id="brands" class="jcarousel-list jcarousel-list-horizontal" style="overflow: hidden; position: relative; top: 0px; margin: 0px; padding: 0px; left: -644.80575px; width: 2565px;">
<li class="jcarousel-item jcarousel-item-horizontal jcarousel-item-1 jcarousel-item-1-horizontal jcarousel-item-placeholder jcarousel-item-placeholder-horizontal" jcarouselindex="1" style="float: left; list-style: none;"></li>
<li class="jcarousel-item jcarousel-item-horizontal jcarousel-item-2 jcarousel-item-2-horizontal jcarousel-item-placeholder jcarousel-item-placeholder-horizontal" jcarouselindex="2" style="float: left; list-style: none;"></li>
<li class="jcarousel-item jcarousel-item-horizontal jcarousel-item-3 jcarousel-item-3-horizontal jcarousel-item-placeholder jcarousel-item-placeholder-horizontal" jcarouselindex="3" style="float: left; list-style: none;"></li>
<li class="jcarousel-item jcarousel-item-horizontal jcarousel-item-4 jcarousel-item-4-horizontal jcarousel-item-placeholder jcarousel-item-placeholder-horizontal" jcarouselindex="4" style="float: left; list-style: none;"></li>
<li class="jcarousel-item jcarousel-item-horizontal jcarousel-item-5 jcarousel-item-5-horizontal jcarousel-item-placeholder jcarousel-item-placeholder-horizontal" jcarouselindex="5" style="float: left; list-style: none;"></li>
<li class="jcarousel-item jcarousel-item-horizontal jcarousel-item-6 jcarousel-item-6-horizontal jcarousel-item-placeholder jcarousel-item-placeholder-horizontal" jcarouselindex="6" style="float: left; list-style: none;"></li>
<li class="jcarousel-item jcarousel-item-horizontal jcarousel-item-7 jcarousel-item-7-horizontal jcarousel-item-placeholder jcarousel-item-placeholder-horizontal" jcarouselindex="7" style="float: left; list-style: none;"></li>
<li class="jcarousel-item jcarousel-item-horizontal jcarousel-item-8 jcarousel-item-8-horizontal jcarousel-item-placeholder jcarousel-item-placeholder-horizontal" jcarouselindex="8" style="float: left; list-style: none;"></li>
<li class="jcarousel-item jcarousel-item-horizontal jcarousel-item-9 jcarousel-item-9-horizontal jcarousel-item-placeholder jcarousel-item-placeholder-horizontal" jcarouselindex="9" style="float: left; list-style: none;"></li>
<li class="jcarousel-item jcarousel-item-horizontal jcarousel-item-10 jcarousel-item-10-horizontal jcarousel-item-placeholder jcarousel-item-placeholder-horizontal" jcarouselindex="10" style="float: left; list-style: none;"></li>
<li><a href="/brands/ACBEL.html"><img src="/product_images/z/acbel__02930.jpg" width="60" height="60" alt="ACBEL"></a></li>
<li><a href="/brands/ACCESS.html"><img src="/product_images/c/access__56651.jpg" width="60" height="60" alt="ACCESS"></a></li>
<li><a href="/brands/ACER.html"><img src="/product_images/l/acer__42827.jpg" width="60" height="60" alt="ACER"></a></li>
<li><a href="/brands/ACTIVISION.html"><img src="/product_images/p/activision__33939.png" width="60" height="60" alt="ACTIVISION"></a></li>
</ul>
4

1 に答える 1

0

通常、私は次のようなことをします：

あなたのカルーセル:

<ul id="brands"></ul>

あなたのスクリプト：

  <script type="text/javascript">    
          $(document).ready(function() {
            $.ajax({
             url: "/brands",
             async:false,
             success : function(data){

             var html = $(data);
             var items = $('.SubBrandListGrid li', html);
             items.each(function() {
               var link = $('a', this);

                 if(link){
                   var librand = "<li><a href=" + $(link).attr('href') + "><img src=" + $('img', this).attr('src') + " width='60' height='60' alt='" + $(link).text() + "'/></a></li>";
                            $("#brands").append(librand);
                 }

             }

            $('#brands').jcarousel({
                auto: 10,
                scroll: 8,
                wrap: 'circular'
            });

         }

        });
     });
    </script>
于 2013-07-26T08:57:32.873 に答える