[英]jQuery - Trying to make one function to work with multiple, same class, divs
So i'm trying to make a simple gallery viewer in jquery. 所以我正在尝试在jquery中创建一个简单的库查看器。
I have something like this in my code: 我的代码中有这样的内容:
<div class="photoset">
<img />
<img />
</div>
<div class="photoset">
<img />
<img />
<img />
</div>
And I want, while the first image is showing, the others to be hidden, and if I click on the right half of the image, the next image shows up. 我想要在显示第一个图像时将其他图像隐藏起来,如果我单击图像的右半部分,则显示下一个图像。
This is what I've got so far: 到目前为止,这是我得到的:
$(document).ready(function () {
var counter = 0,
$items = $('.photoset figure'),
numItems = $items.length;
var showCurrent = function () {
var itemToShow = Math.abs(counter % numItems);
$items.removeClass('show');
$items.eq(itemToShow).addClass('show');
};
$("div").click(function (e) {
var pWidth = $(this).innerWidth();
var pOffset = $(this).offset();
var x = e.pageX - pOffset.left;
if (pWidth / 2 > x) {
counter--;
showCurrent();
}
else {
counter++;
showCurrent();
}
});
});
The click function works, but it change all the divs, and I think the counter does not work as I want it to work. 单击功能有效,但它会更改所有div,我认为计数器无法正常运行。
This is the code that generates the gallery: 这是生成图库的代码:
@foreach (var item in Model)
{
<br />
@Html.DisplayFor(modelitem => item.NomeGaleria)
<br />
<div class="photoset">
@{ var item2 = item.FilePaths;}
@for (var k = 0; k < Enumerable.Count(item2); k++)
{
<br />
<figure class="@(k == 0 ? "show" : "" ) ">
<img src="~/images/@Html.DisplayFor(modelItem2 => item2[k].FileName)" alt="" height="300" width="500" />
</figure>
<br />
}
</div>
Sorry if the answer is obvious, I'm extremely new with jQuery/JavaScript. 抱歉,如果答案很明显,那么jQuery / JavaScript是我的新手。
Try that: 试试看:
HTML: HTML:
<div class="photoset">
<img src="http://inspirebee.com/wp-content/uploads/2013/04/animal-fashion-parade.jpg" />
<img src="http://www.fubiz.net/wp-content/uploads/2013/03/Fashion-Zoo-Animals18.jpg" />
<img src="http://inspirebee.com/wp-content/uploads/2013/04/animal-in-fashion.jpg" />
<img src="http://www.fubiz.net/wp-content/uploads/2013/03/Fashion-Zoo-Animals20.jpg" />
</div>
<div class="photoset">
<img src="http://www.fubiz.net/wp-content/uploads/2013/03/Fashion-Zoo-Animals26.jpeg" />
<img src="http://www.fubiz.net/wp-content/uploads/2013/03/Fashion-Zoo-Animals14.jpg" />
<img src="http://inspirebee.com/wp-content/uploads/2013/04/animal-fashion.jpg" />
<img src="https://framboisemood.files.wordpress.com/2013/04/fashion-zoo-animals13.jpg" />
<img src="http://www.fubiz.net/wp-content/uploads/2013/03/Fashion-Zoo-Animals9.jpg" />
</div>
CSS: CSS:
.photoset > img:not(:first-child) {
display: none;
}
JavaScript: JavaScript:
$(document).ready(function() {
$('.photoset').each(function(){
$(this).data('counter', 0);
});
var showCurrent = function(photoset) {
$items = photoset.find('img');
var counter = photoset.data('counter');
var numItems = $items.length;
var itemToShow = counter % numItems;
$items.hide();
$items.eq(itemToShow).show();
};
$('.photoset').on('click', function(e) {
e.stopPropagation();
var photoset = $(this);
var pWidth = photoset.innerWidth();
var pOffset = photoset.offset();
var x = e.pageX - pOffset.left;
if (pWidth / 2 > x) {
photoset.data('counter', photoset.data('counter') - 1);
showCurrent(photoset);
} else {
photoset.data('counter', photoset.data('counter') + 1);
showCurrent(photoset);
}
});
});
JSFiddle: https://jsfiddle.net/ty0vqk2y/1/ JSFiddle: https ://jsfiddle.net/ty0vqk2y/1/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.