屏幕截图

Question

我正在尝试使用猫头鹰轮播加载我的动态类别，但是它会显示已关闭的项目。

屏幕截图

first category **Notebook** is opened and others are closed

second category **PC** is opened and others are closed

我需要打开所有页面并在页面加载时显示项目。如果我使用html版本，则可以正常工作，但是当我添加动态代码时，它如上图所示损坏了。

代码

<div class="category-module" id="latest_category">
  <h3 class="subtitle">{{$kis->title}} - <a class="viewall" href="category.tpl">view all</a></h3>
  <div class="category-module-content">

    <!-- tabs -->
    <ul id="sub-cat" class="tabs">
      @foreach($kis->childs->take(6) as $child)
      <li><a href="#tab-cat{{$child->id}}">{{$child->title}}</a></li>
      @endforeach
    </ul>

    <!-- items -->
    @foreach($kis->childs->take(6) as $child)
      <div id="tab-cat{{$child->id}}" class="tab_content">
        <div class="owl-carousel latest_category_tabs">
          @foreach($child->products->take(10) as $ki)
          <div class="product-thumb">
            <div class="image"><a href="product.html"><img src="image/product/samsung_tab_1-200x200.jpg" alt="Aspire Ultrabook Laptop" title="Aspire Ultrabook Laptop" class="img-responsive" /></a></div>
            <div class="caption">
              <h4><a href="product.html">{{$ki->title}}</a></h4>
              <p class="price"> <span class="price-new">{{number_format($ki->price,0)}}</span> <span class="price-old">$241.99</span> <span class="saving">-5%</span> </p>
            </div>
          </div>
          @endforeach
        </div>
      </div>
    @endforeach
  </div>
</div>

有人可以帮助我找到问题吗？

PS：如果您想知道为什么我的PHP代码就是您在代码中看到的方式，我正在使用laravel刀片模板。

更新

在这里，我分享了上面的代码的完整html版本，也许您会发现一些我无法做到的差异

<div class="category-module" id="latest_category">
  <h3 class="subtitle">Electronics - <a class="viewall" href="category.tpl">view all</a></h3>
  <div class="category-module-content">
    <ul id="sub-cat" class="tabs">
      <li><a href="#tab-cat1">Laptops</a></li>
      <!-- and more -->
    </ul>
    <div id="tab-cat1" class="tab_content">
      <div class="owl-carousel latest_category_tabs">
        <div class="product-thumb">
          <div class="image"><a href="product.html"><img src="image/product/samsung_tab_1-200x200.jpg" alt="Aspire Ultrabook Laptop" title="Aspire Ultrabook Laptop" class="img-responsive" /></a></div>
          <div class="caption">
            <h4><a href="product.html">Aspire Ultrabook Laptop</a></h4>
            <p class="price"> <span class="price-new">$230.00</span> <span class="price-old">$241.99</span> <span class="saving">-5%</span> </p>
            <div class="rating"> <span class="fa fa-stack"><i class="fa fa-star fa-stack-2x"></i><i class="fa fa-star-o fa-stack-2x"></i></span> <span class="fa fa-stack"><i class="fa fa-star fa-stack-2x"></i><i class="fa fa-star-o fa-stack-2x"></i></span> <span class="fa fa-stack"><i class="fa fa-star fa-stack-2x"></i><i class="fa fa-star-o fa-stack-2x"></i></span> <span class="fa fa-stack"><i class="fa fa-star fa-stack-2x"></i><i class="fa fa-star-o fa-stack-2x"></i></span> <span class="fa fa-stack"><i class="fa fa-star-o fa-stack-2x"></i></span> </div>
          </div>
          <div class="button-group">
            <button class="btn-primary" type="button" onClick=""><span>Add to Cart</span></button>
            <div class="add-to-links">
              <button type="button" data-toggle="tooltip" title="Add to wishlist" onClick=""><i class="fa fa-heart"></i></button>
              <button type="button" data-toggle="tooltip" title="Add to compare" onClick=""><i class="fa fa-exchange"></i></button>
            </div>
          </div>
        </div>
        <div class="product-thumb">
          <div class="image"><a href="product.html"><img src="image/product/macbook_pro_1-200x200.jpg" alt=" Strategies for Acquiring Your Own Laptop " title=" Strategies for Acquiring Your Own Laptop " class="img-responsive" /></a></div>
          <div class="caption">
            <h4><a href="product.html"> Strategies for Acquiring Your Own Laptop </a></h4>
            <p class="price"> <span class="price-new">$1,400.00</span> <span class="price-old">$1,900.00</span> <span class="saving">-26%</span> </p>
          </div>
          <div class="button-group">
            <button class="btn-primary" type="button" onClick=""><span>Add to Cart</span></button>
            <div class="add-to-links">
              <button type="button" data-toggle="tooltip" title="Add to wishlist" onClick=""><i class="fa fa-heart"></i></button>
              <button type="button" data-toggle="tooltip" title="Add to compare" onClick=""><i class="fa fa-exchange"></i></button>
            </div>
          </div>
        </div>
        <div class="product-thumb">
          <div class="image"><a href="product.html"><img src="image/product/macbook_air_1-200x200.jpg" alt="Laptop Silver black" title="Laptop Silver black" class="img-responsive" /></a></div>
          <div class="caption">
            <h4><a href="product.html">Laptop Silver black</a></h4>
            <p class="price"> <span class="price-new">$1,142.00</span> <span class="price-old">$1,202.00</span> <span class="saving">-5%</span> </p>
          </div>
          <div class="button-group">
            <button class="btn-primary" type="button" onClick=""><span>Add to Cart</span></button>
            <div class="add-to-links">
              <button type="button" data-toggle="tooltip" title="Add to wishlist" onClick=""><i class="fa fa-heart"></i></button>
              <button type="button" data-toggle="tooltip" title="Add to compare" onClick=""><i class="fa fa-exchange"></i></button>
            </div>
          </div>
        </div>
        <div class="product-thumb">
          <div class="image"><a href="product.html"><img src="image/product/macbook_1-200x200.jpg" alt="Ideapad Yoga 13-59341124 Laptop" title="Ideapad Yoga 13-59341124 Laptop" class="img-responsive" /></a></div>
          <div class="caption">
            <h4><a href="product.html">Ideapad Yoga 13-59341124 Laptop</a></h4>
            <p class="price"> $2.00 </p>
            <div class="rating"> <span class="fa fa-stack"><i class="fa fa-star fa-stack-2x"></i><i class="fa fa-star-o fa-stack-2x"></i></span> <span class="fa fa-stack"><i class="fa fa-star fa-stack-2x"></i><i class="fa fa-star-o fa-stack-2x"></i></span> <span class="fa fa-stack"><i class="fa fa-star fa-stack-2x"></i><i class="fa fa-star-o fa-stack-2x"></i></span> <span class="fa fa-stack"><i class="fa fa-star fa-stack-2x"></i><i class="fa fa-star-o fa-stack-2x"></i></span> <span class="fa fa-stack"><i class="fa fa-star-o fa-stack-2x"></i></span> </div>
          </div>
          <div class="button-group">
            <button class="btn-primary" type="button" onClick=""><span>Add to Cart</span></button>
            <div class="add-to-links">
              <button type="button" data-toggle="tooltip" title="Add to wishlist" onClick=""><i class="fa fa-heart"></i></button>
              <button type="button" data-toggle="tooltip" title="Add to compare" onClick=""><i class="fa fa-exchange"></i></button>
            </div>
          </div>
        </div>
        <div class="product-thumb">
          <div class="image"><a href="product.html"><img src="image/product/ipod_shuffle_1-200x200.jpg" alt="Hp Pavilion G6 2314ax Notebok Laptop" title="Hp Pavilion G6 2314ax Notebok Laptop" class="img-responsive" /></a></div>
          <div class="caption">
            <h4><a href="product.html">Hp Pavilion G6 2314ax Notebok Laptop</a></h4>
            <p class="price"> $122.00 </p>
          </div>
          <div class="button-group">
            <button class="btn-primary" type="button" onClick=""><span>Add to Cart</span></button>
            <div class="add-to-links">
              <button type="button" data-toggle="tooltip" title="Add to wishlist" onClick=""><i class="fa fa-heart"></i></button>
              <button type="button" data-toggle="tooltip" title="Add to compare" onClick=""><i class="fa fa-exchange"></i></button>
            </div>
          </div>
        </div>
        <div class="product-thumb">
          <div class="image"><a href="product.html"><img src="image/product/ipod_touch_1-200x200.jpg" alt="Samsung Galaxy S4" title="Samsung Galaxy S4" class="img-responsive" /></a></div>
          <div class="caption">
            <h4><a href="product.html">Samsung Galaxy S4</a></h4>
            <p class="price"> <span class="price-new">$62.00</span> <span class="price-old">$122.00</span> <span class="saving">-50%</span> </p>
          </div>
          <div class="button-group">
            <button class="btn-primary" type="button" onClick=""><span>Add to Cart</span></button>
            <div class="add-to-links">
              <button type="button" data-toggle="tooltip" title="Add to wishlist" onClick=""><i class="fa fa-heart"></i></button>
              <button type="button" data-toggle="tooltip" title="Add to compare" onClick=""><i class="fa fa-exchange"></i></button>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- and more -->
  </div>
</div>

更新2

这是我轮播的javascript

$("#latest_category .owl-carousel.latest_category_tabs").owlCarousel({
    itemsCustom : [[320, 2],[600, 2],[768, 3],[992, 5],[1199, 5]],
    lazyLoad : true,
    navigation : true,
    navigationText: ['<i class="fa fa-angle-left"></i>', '<i class="fa fa-angle-right"></i>'],
    scrollPerPage : true,
    pagination: false,
});
$("#latest_category .tab_content").addClass("deactive");
$("#latest_category .tab_content:first").show();
//Default Action
$("#latest_category ul#sub-cat li:first").addClass("active").show(); //Activate first tab
//On Click Event
$("#latest_category ul#sub-cat li").on("click", function() {
    $("#latest_category ul#sub-cat li").removeClass("active"); //Remove any "active" class
    $(this).addClass("active"); //Add "active" class to selected tab
    $("#latest_category .tab_content").hide(); 
    var activeTab = $(this).find("a").attr("href"); //Find the rel attribute value to identify the active tab + content
    $(activeTab).fadeIn(); //Fade in the active content
    return false;
});

Answer 1

如果我对您的理解正确，那么问题就出在转盘上。它与标签脚本一起使用。

因此，最好使用类作为选择器。

您似乎在为标签页使用类似https://gist.github.com/hong6/7372763的标签。

那么您最好删除#latest_category并使用一个类。然后在您的jquery中，您可以添加jquery上下文。这是未经测试的代码：

$(".category-module .owl-carousel.latest_category_tabs").owlCarousel({
    itemsCustom : [[320, 2],[600, 2],[768, 3],[992, 5],[1199, 5]],
    lazyLoad : true,
    navigation : true,
    navigationText: ['<i class="fa fa-angle-left"></i>', '<i class="fa fa-angle-right"></i>'],
    scrollPerPage : true,
    pagination: false,
});

$(".category-module").each(function() {
    $(".tab_content", this).addClass("deactive");
    $(".tab_content:first", this).show();
    //Default Action
    $("ul#sub-cat li:first", this).addClass("active").show(); //Activate first tab
});

//On Click Event
$(".category-module ul#sub-cat li").on("click", function() {
    var parent = $(this).parents('.category-module')
    $("ul#sub-cat li", parent).removeClass("active"); //Remove any "active" class
    $(this).addClass("active"); //Add "active" class to selected tab
    $(".tab_content", parent).hide(); 
    var activeTab = $(this).find("a").attr("href"); //Find the rel attribute value to identify the active tab + content
    $(activeTab, parent).fadeIn(); //Fade in the active content
    return false;
});

这是一个fiddle，显示了类似的情况。

猫头鹰传送带无法正确显示

屏幕截图

代码

更新

更新2

1 个答案: