js实现选中缩略图

实现选中缩略图功能

在JavaScript中实现选中缩略图功能通常涉及DOM操作和事件监听。以下是几种常见的实现方式：

通过类名切换实现选中效果

const thumbnails = document.querySelectorAll('.thumbnail');

thumbnails.forEach(thumbnail => {
  thumbnail.addEventListener('click', function() {
    // 移除所有缩略图的选中类
    document.querySelectorAll('.thumbnail').forEach(el => {
      el.classList.remove('selected');
    });

    // 为当前点击的缩略图添加选中类
    this.classList.add('selected');
  });
});

使用数据属性存储选中状态

const gallery = document.querySelector('.gallery');

gallery.addEventListener('click', (e) => {
  const clickedThumb = e.target.closest('.thumbnail');
  if (!clickedThumb) return;

  // 更新所有缩略图的选中状态
  document.querySelectorAll('.thumbnail').forEach(thumb => {
    thumb.dataset.selected = thumb === clickedThumb ? 'true' : 'false';
  });
});

与主图联动的缩略图选择

const thumbs = document.querySelectorAll('.thumbnail');
const mainImage = document.getElementById('main-image');

thumbs.forEach(thumb => {
  thumb.addEventListener('click', () => {
    // 更新主图
    mainImage.src = thumb.dataset.fullsize;

    // 更新缩略图选中状态
    thumbs.forEach(t => t.classList.remove('active'));
    thumb.classList.add('active');
  });
});

使用事件委托优化性能

document.querySelector('.thumbnail-container').addEventListener('click', (e) => {
  const thumb = e.target.closest('.thumbnail');
  if (!thumb) return;

  const index = thumb.dataset.index;

  // 更新选中状态
  document.querySelectorAll('.thumbnail').forEach(t => {
    t.classList.toggle('selected', t === thumb);
  });

  // 其他相关操作...
});

添加视觉反馈的CSS示例

.thumbnail {
  border: 2px solid transparent;
  transition: all 0.3s ease;
}

.thumbnail.selected {
  border-color: #0066ff;
  box-shadow: 0 0 8px rgba(0, 102, 255, 0.5);
}

处理键盘可访问性

thumbnails.forEach(thumb => {
  thumb.addEventListener('keydown', (e) => {
    if (e.key === 'Enter' || e.key === ' ') {
      e.preventDefault();
      thumb.click();
    }
  });

  thumb.setAttribute('tabindex', '0');
  thumb.setAttribute('role', 'button');
});

以上方法可以根据具体需求进行调整和组合使用。关键点包括：管理选中状态、提供视觉反馈、确保良好的用户体验和可访问性。