Question

我建立了一个图库，其中包含一个主图像和下面最多5个缩略图。并可以使用向左和向右按钮循环浏览缩略图并替换主图像，如下所示：

$(".gallery-btn-left").unbind("click").bind("click", function(){
    var image_id = $(".gallery-main-image img").attr('data-id');
    image_id--;
    if(image_id == 0){image_id = $('.gallery-thumbnail img').length;}
    var image_url = $(".gallery-thumbnail img[data-id=" + image_id + "]").attr('src');
    $(".gallery-main-image img").attr('src', image_url);
    $(".gallery-main-image img").attr('data-id', image_id);
});
$(".gallery-btn-right").unbind("click").bind("click", function(){
    var image_id = $(".gallery-main-image img").attr('data-id');
    image_id++;
    if(image_id > $('.gallery-thumbnail img').length){image_id = 1;}
    var image_url = $(".gallery-thumbnail img[data-id=" + image_id + "]").attr('src');
    $(".gallery-main-image img").attr('src', image_url);
    $(".gallery-main-image img").attr('data-id', image_id);
});

这一切都很好，但是，如果我想在同一页面上放置两个画廊，我会遇到一个问题，我的JS正在获取10而不是5，或者可能会有缩略图（预计$('.gallery-thumbnail img').length的每个画廊最多5个。

我想知道的是，是否有一种方法可以获取父库中缩略图的长度，而不是整个页面上有多少缩略图。

任何帮助或建议，将不胜感激。

Answer 1

用于多个实例的最常见方法是查找容器实例，然后在该实例中使用find()。

此外，当您多次查找同一选择器时，最好是存储对其的引用，而不是每次需要访问DOM时都对其进行搜索。这也使代码更易于阅读

类似的东西：

$(".gallery-btn-left").unbind("click").bind("click", function() {
  var $gallery = $(this).closest('.MAIN-GALLERY-CLASSNAME'),
      $mainImg = $gallery.find(".gallery-main-image img"),
      $thumbs = $gallery.find('.gallery-thumbnail img'),        
      image_id = $mainImg.attr('data-id');

  image_id--;
  if (image_id == 0) {
    image_id = $thumbs.length;
  }
  var image_url = $thumbs.filter("[data-id=" + image_id + "]").attr('src');
  $mainImg.attr({'src': image_url, 'data-id',image_id});

});

JS-按父类中的类获取项目数

1 个答案: