jQuery - 试图使一个功能与多个，同一类，divs

Question

所以我想在jQuery中做一个简单的画廊查看器。

我有我的代码是这样的：

<div class="photoset"> 
    <img /> 
    <img /> 
</div> 

<div class="photoset"> 
    <img /> 
    <img /> 
    <img /> 
</div> 

而且我想，当第一图像显示，其他被隐藏的，如果我点击图像的右半部分，该下图显示。

这是我到目前为止有：

$(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(); 
     } 
    }); 

}); 

单击功能的工作原理，但它改变所有的div，我想，我想它的工作柜台不起作用。

这是生成画廊代码：

如果

@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> 

对不起，答案是显而易见的，我用jQuery/JavaScript的非常新。

Answer 1

试一下：

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：

.photoset > img:not(:first-child) { 
    display: none; 
} 

的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/