时间戳

首页 > 解决方案 > 在JS中按类获取父类中的项目数

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

问题描述

我建立了一个图像库，其中有一个主图像和最多 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的缩略图（每个画廊最多 5 个） 。$('.gallery-thumbnail img').length

我想知道的是是否有办法获取父画廊中缩略图数量的长度，而不是整个页面上有多少缩略图。

标签： javascript

解决方案

多实例最常见的方法是查找容器实例，然后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});

});

推荐阅读