相同class元素点击仅触发选中项功能点击图片展示对应隐藏区域实现问题

算力阿峰

2026-10-1

问题原因

你当前的代码直接通过全局类名选择所有匹配元素，没有限定作用范围到你点击的图片对应的模块，所以每次点击会触发所有同类名元素的显隐切换。

解决方案

第一步：修改HTML中img的点击事件传参

把所有img的onclick属性修改为传入当前触发元素本身：

<img class='tm-img' onclick='run(this)' src="/team_1.png" alt="">

第二步：修改JS逻辑，限定显隐操作的范围

修改run函数，先定位到点击图片所属的独立模块容器，再仅操作该容器内的目标元素：

function run(ele){
  // 定位当前点击图片对应的最外层独立模块容器
  const $currentModule = $(ele).closest('.tm-full-container')
  // 仅切换当前模块内的对应元素
  $currentModule.find('.tm-info').toggle()
  $currentModule.find('.tm-full-info').toggle()
  $currentModule.find('.tm-title').toggle()
}

优化方案（可选，更符合前端开发规范）

你也可以去掉所有内联的onclick属性，改用事件绑定的方式实现，代码更整洁易维护：

// 页面加载完成后绑定点击事件
$(function(){
  $('.tm-img').on('click', function() {
    const $currentModule = $(this).closest('.tm-full-container')
    $currentModule.find('.tm-info').toggle()
    $currentModule.find('.tm-full-info').toggle()
    $currentModule.find('.tm-title').toggle()
  })
})