使用JavaScript/Laravel错误加载数据

目前我正在加载一个产品列表，但我想将其限制在前10个，这样我就可以使用“加载更多”按钮一次显示其余的几个。不幸的是，它似乎加载了所有的产品，而不是一些精选的产品

  <div id="products-grid" class="ui grid stackable three column">
    @foreach($products as $product)
    <div class="eight wide tablet five wide computer column" key="{{ $product->id }}">
      <div class="ui fluid card single-product">
        <a href="{{ url('brands/'.$product->brandslug.'/'.$product->slug)}}" class="image">
          @if($product->product_img != 'null')
          <img src="{{ url('/images/'.$product->product_img)}}" title="{{ $product->name }}" alt="{{ $product->name }}">
          @else
          @endif
        </a>
        <div class="product-title content">
          <a href="{{ url('brands/'.$product->brandslug.'/'.$product->slug)}}" class="title">
            <h5 class="fix-title">{{ $product->name }}</h5>
            <div class="fix-subtitle">From <a href="{{ url('/brands/'.$product->brandslug)}}">{{ $product->brandname }}</a></div>
          </a>
        </div>
        <div class="content">
          <a href="{{ url('/brands/'.$product->brandslug.'/'.$product->slug)}}">
            <button class="grey ui button centered fluid">View Product</button>
          </a>
        </div>
      </div>
    </div>
    @endforeach
  </div>

上面是显示相关产品的产品网格

if(count($products)>10)
  <div class="loadmore" id="load_more">
    <button class="ui inverted button">
      Load More
    </button>
  </div>
  @endif

如果特定页面上的产品超过10种，则基本上会显示该按钮

@section('script')
<script type="application/javascript">
$(document).ready(function () {
        $("#products-grid").slice(0, 8).show();
        if ($("#products-grid:hidden").length != 0) {
            $("#load_more").show();
        }
        $("#load_more").on('click', function (e) {
            e.preventDefault();
            $("#products-grid:hidden").slice(0, 6).slideDown();
            if ($("#products-grid:hidden").length == 0) {
                $("#load_more").fadeOut('slow');
            }
        });
    });
</script>

@endsection

---

这是一个脚本，用于隐藏一些显示的产品，这样当我单击“加载更多”时，它会一次显示其他6或7个产品，直到没有产品可显示为止。这在一定程度上起作用，因为当没有产品可以显示时，按钮会逐渐消失。问题是它加载了所有内容，所以我不确定javascript代码为什么不能正常工作？

u应该检查这个AFAICT，因为您最初有意加载所有产品，然后希望逐步显示JS页面上已有的新批，对吗？所以最初，除了前10个应该隐藏，但是我在你的代码中没有看到任何这样做的东西？请注意，更典型的方法是一次仅从服务器加载10个，然后单击按钮进行AJAX调用以加载另一个10并显示它们。如果您有大量的产品，这可能会扩展得更好，因为初始页面加载不必加载和隐藏90%的产品。@不必。是的，这是正确的。这就是我想要做的，尽管我不知道如何在开始时隐藏所有东西，但首先要隐藏的10个产品除外？我原以为切片法应该做到这一点，但显然还没有做到，要好好想一想。在展示产品的@foreach循环中，您需要知道您展示了多少产品。所以你需要一个柜台。然后你需要知道计数器何时达到10，然后，剩下的任何其他产品都需要隐藏。因此，您可以使用一些CSS来实现这一点，例如使用隐藏的CSS类，JS将在需要时删除这些类。试一试！：-您可以尝试使用vuejs组件，这样做很容易