组件按钮最初显示“n”个 div 元素，然后显示“n”个更多元素

Question

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

我正在使用ASP.NET MVC，所以我有一个元素列表进入我的视图并通过 for 循环显示。我之前使用了一个 jQuery 滑块组件来进行其他操作，以使用左/右拖动滚动功能和单击箭头的给定功能连续显示 n 个元素。我能找到一个 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>

我正在尝试将点击功能添加到我的图像 div 并包含 onclick"SeeMoreProducts()" function。

这是我的 JS：

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

Answer 1

使用.slice 来实现这一点并在html 中使用.on 事件绑定而不是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: