组件按钮先显示n个div元素，然后再显示n个其他元素

Question

I'm trying to find a component class/button that will show 'n' number of div elements initially, then will show 'n' number more elements each time the button is clicked until there are no more div elements to be displayed.

I am using ASP.NET MVC , so I have a list of elements coming in to my view and being displayed through a for loop. I have used a jQuery slider component for something else before to display n elements in a row with the given functionality of left/right drag-scroll functionality and click arrows. Will I be able to find a jQuery component or will I have to write my own Javascript?

I have attempted with the following:

This is my 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 .

This is my JS:

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

Answer 1

Use .slice to achieve this and use .on event binding rather than onClick in html

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: