我试图找到一个会显示＆＃39; n＆＃39;的组件类/按钮。最初的div元素数量，然后将显示＆＃39; n＆＃39;每次单击按钮时编号更多元素，直到不再显示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>
答案 0 :(得分：2)
使用.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: