javascript - 组件按钮最初显示 'n' 个 div 元素，然后显示 'n' 个更多元素

Question

我试图找到一个组件类/按钮，它最初会显示“n”个 div 元素，然后每次单击按钮时都会显示“n”个元素，直到没有更多的 div 元素为止显示。

我正在使用 ASP.NET MVC，所以我有一个元素列表进入我的 View 并通过 for 循环显示。在使用左/右拖动滚动功能和单击箭头的给定功能在一行中显示 n 个元素之前，我已经将 jQuery slider 组件用于其他用途。我能找到 jQuery 组件还是必须自己编写 Javascript？

我尝试了以下内容:

这是我的 HTML:

<div class="row whiteBG">
        @foreach (var item in Model.Products)
        {
            <div id="special-products" class="col-sm-3 align-centre">

                @Html.Image(item.ByteImage, item.Name, "128")
                <div class="blend-box category-head" style="background: #323232 url(@Html.ImageSrc(item.ByteImage)) no-repeat 50% 100%;">
                    <div class="item-container">

                        <div class="desc-plus-products">
                            <p>@item.Name</p>
                            <p>@item.Price</p>
                        </div>
                    </div>
                </div>
            </div>
        }
    </div>

<div class="row whiteBG">
    <div class="see-all-image" onclick="SeeMoreProducts()">
        <img src="~/Content/Images/seeAll.jpg" alt="See all items :)" />
    </div>
</div>

I am trying to add click functionality to my image div and have included an onclick"SeeMoreProducts()" function.

这是我的 JS:

<script>
    $(document).ready(function SeeMoreProducts() {
        $("#special-products:lt(5)").show();
    });
</script>

Answer 1

使用 .slice 来实现这一点并使用 .on 事件绑定(bind)而不是 html 中的 onClick

var showItem = 5;  // Your desire number of item to show each time
var counter = 1;
$(function() {
  var $box = $('.blend-box');
  $box.slice(showItem).hide();
  $('.see-all-image').on('click', function() {
    $box.slice(0, showItem * counter + showItem).show();
    counter++;
  })
});

var showItem = 5;  // Your desire number of item to show each time
var counter = 1;
$(function() {
  var $box = $('.blend-box');
  $box.slice(showItem).hide();
  $('.see-all-image').on('click', function() {
    console.log(showItem * counter + showItem);
    $box.slice(0, showItem * counter + showItem).show();
    counter++;
  })
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row whiteBG">

  <div id="special-products" class="col-sm-3 align-centre">
    <div class="blend-box category-head" style="background: #323232 url(@Html.ImageSrc(item.ByteImage)) no-repeat 50% 100%;">
      <div class="item-container">

        <div class="desc-plus-products">
          <p>@item.Name</p>
          <p>@item.Price</p>
        </div>
      </div>
    </div>
    <div class="blend-box category-head" style="background: #323232 url(@Html.ImageSrc(item.ByteImage)) no-repeat 50% 100%;">
      <div class="item-container">

        <div class="desc-plus-products">
          <p>@item.Name</p>
          <p>@item.Price</p>
        </div>
      </div>
    </div>
    <div class="blend-box category-head" style="background: #323232 url(@Html.ImageSrc(item.ByteImage)) no-repeat 50% 100%;">
      <div class="item-container">

        <div class="desc-plus-products">
          <p>@item.Name</p>
          <p>@item.Price</p>
        </div>
      </div>
    </div>
    <div class="blend-box category-head" style="background: #323232 url(@Html.ImageSrc(item.ByteImage)) no-repeat 50% 100%;">
      <div class="item-container">

        <div class="desc-plus-products">
          <p>@item.Name</p>
          <p>@item.Price</p>
        </div>
      </div>
    </div>
    <div class="blend-box category-head" style="background: #323232 url(@Html.ImageSrc(item.ByteImage)) no-repeat 50% 100%;">
      <div class="item-container">

        <div class="desc-plus-products">
          <p>@item.Name</p>
          <p>@item.Price</p>
        </div>
      </div>
    </div>
    <div class="blend-box category-head" style="background: #323232 url(@Html.ImageSrc(item.ByteImage)) no-repeat 50% 100%;">
      <div class="item-container">

        <div class="desc-plus-products">
          <p>@item.Name</p>
          <p>@item.Price</p>
        </div>
      </div>
    </div>
    <div class="blend-box category-head" style="background: #323232 url(@Html.ImageSrc(item.ByteImage)) no-repeat 50% 100%;">
      <div class="item-container">

        <div class="desc-plus-products">
          <p>@item.Name</p>
          <p>@item.Price</p>
        </div>
      </div>
    </div>
    <div class="blend-box category-head" style="background: #323232 url(@Html.ImageSrc(item.ByteImage)) no-repeat 50% 100%;">
      <div class="item-container">

        <div class="desc-plus-products">
          <p>@item.Name</p>
          <p>@item.Price</p>
        </div>
      </div>
    </div>
    <div class="blend-box category-head" style="background: #323232 url(@Html.ImageSrc(item.ByteImage)) no-repeat 50% 100%;">
      <div class="item-container">

        <div class="desc-plus-products">
          <p>@item.Name</p>
          <p>@item.Price</p>
        </div>
      </div>
    </div>
    <div class="blend-box category-head" style="background: #323232 url(@Html.ImageSrc(item.ByteImage)) no-repeat 50% 100%;">
      <div class="item-container">

        <div class="desc-plus-products">
          <p>@item.Name</p>
          <p>@item.Price</p>
        </div>
      </div>
    </div>
    <div class="blend-box category-head" style="background: #323232 url(@Html.ImageSrc(item.ByteImage)) no-repeat 50% 100%;">
      <div class="item-container">

        <div class="desc-plus-products">
          <p>@item.Name</p>
          <p>@item.Price</p>
        </div>
      </div>
    </div>
    <div class="blend-box category-head" style="background: #323232 url(@Html.ImageSrc(item.ByteImage)) no-repeat 50% 100%;">
      <div class="item-container">

        <div class="desc-plus-products">
          <p>@item.Name</p>
          <p>@item.Price</p>
        </div>
      </div>
    </div>
    <div class="blend-box category-head" style="background: #323232 url(@Html.ImageSrc(item.ByteImage)) no-repeat 50% 100%;">
      <div class="item-container">

        <div class="desc-plus-products">
          <p>@item.Name</p>
          <p>@item.Price</p>
        </div>
      </div>
    </div>
    <div class="blend-box category-head" style="background: #323232 url(@Html.ImageSrc(item.ByteImage)) no-repeat 50% 100%;">
      <div class="item-container">

        <div class="desc-plus-products">
          <p>@item.Name</p>
          <p>@item.Price</p>
        </div>
      </div>
    </div>
    <div class="blend-box category-head" style="background: #323232 url(@Html.ImageSrc(item.ByteImage)) no-repeat 50% 100%;">
      <div class="item-container">

        <div class="desc-plus-products">
          <p>@item.Name</p>
          <p>@item.Price</p>
        </div>
      </div>
    </div>
    <div class="blend-box category-head" style="background: #323232 url(@Html.ImageSrc(item.ByteImage)) no-repeat 50% 100%;">
      <div class="item-container">

        <div class="desc-plus-products">
          <p>@item.Name</p>
          <p>@item.Price</p>
        </div>
      </div>
    </div>
  </div>

</div>

<div class="row whiteBG">
  <div class="see-all-image" onclick="">
    <img src="~/Content/Images/seeAll.jpg" alt="See all items :)" />
  </div>
</div>
I am trying to add click functionality to my image div and have included an onclick"SeeMoreProducts()" function. This is my JS: