如何追踪特定SVG点击？解决仅首个箭头响应点击的问题

问题原因 #

你之前用document.querySelector('.arrow')只会选中页面中第一个匹配.arrow类的元素，所以只有第一个箭头能触发点击事件。要实现每个箭头独立响应，需要选中所有箭头并分别绑定事件。

原生JavaScript解决方案 #

不需要依赖jQuery，用原生JS就能轻松实现：

1. 确保你的HTML结构中每个箭头都带有.arrow类（示例结构）：

<div class="content-item">
  <svg class="arrow" viewBox="0 0 24 24">
    <path fill="currentColor" d="M12 5l-8 8 8 8 1.5-1.5L7 12l6.5-6.5z"/>
  </svg>
</div>
<div class="content-item">
  <svg class="arrow" viewBox="0 0 24 24">
    <path fill="currentColor" d="M12 5l-8 8 8 8 1.5-1.5L7 12l6.5-6.5z"/>
  </svg>
</div>

2. 编写JavaScript代码：

// 选中所有带.arrow类的元素
const allArrows = document.querySelectorAll('.arrow');

// 遍历每个箭头，绑定点击事件
allArrows.forEach(arrow => {
  arrow.addEventListener('click', function() {
    // 切换当前箭头的active类（若只需添加而非切换，替换为this.classList.add('active')）
    this.classList.toggle('active');
  });
});

jQuery解决方案 #

如果偏好使用jQuery，代码更简洁：

// 给所有.arrow元素绑定点击事件
$('.arrow').click(function() {
  // 切换当前点击箭头的active类
  $(this).toggleClass('active');
});

注意：使用jQuery需要先在页面中引入jQuery库。

关键说明 #

• 无论是原生JS还是jQuery，核心都是针对当前被点击的元素操作类名，用this（原生）或$(this)（jQuery）指向触发事件的箭头，避免影响其他箭头。
• toggleClass会自动切换类的存在状态（有则移除，无则添加），如果需求是点击后只添加类不允许移除，替换成addClass('active')即可。

内容的提问来源于stack exchange，提问作者Alexey