Question

我有一个JCarousel，它可以滚动商店中的品牌。我从商店中的另一个页面提取的品牌链接，名称和图像（CMS限制我以不同方式访问此数据）。

我正在提取品牌数据并格式化<li>条目并将其附加到JCarousel。最后发生的事情是Carousel包含“占位符<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>

Answer 1

通常我会做这样的事情：

你的转盘：

<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>

JCarousel使用JQuery加载<li> </li>

1 个答案: