点击图片变暗功能首次点击无效问题及网格布局优化咨询

一、修复首次点击需两次生效的问题 #

你的问题根源在于初始透明度的读取逻辑：如果初始opacity是通过CSS类或全局样式设置的1.0，直接读取元素的style.opacity会得到空字符串（因为style属性仅读取内联样式），导致第一次判断逻辑出错。

修正后的函数应该用getComputedStyle获取元素实际生效的透明度值，而不是只看内联样式：

function lootDarken(element) {
  // 获取元素当前实际生效的透明度
  const currentOpacity = window.getComputedStyle(element).opacity;
  // 切换透明度状态
  element.style.opacity = currentOpacity === '1' ? '0.5' : '1';
}

如果用事件委托绑定（更适合批量元素），代码可以写成：

// 给父容器绑定一次事件，处理所有子图标点击
document.querySelector('.loot-grid').addEventListener('click', (e) => {
  if (e.target.classList.contains('Loot')) {
    const currentOpacity = window.getComputedStyle(e.target).opacity;
    e.target.style.opacity = currentOpacity === '1' ? '0.5' : '1';
  }
});

这样不管初始透明度是通过CSS还是内联设置，第一次点击都能正确识别状态并切换。

二、更简洁的网格布局方案 #

用table做网格布局既不符合语义，也不利于维护数百个图标。推荐用CSS Grid实现响应式网格，代码简洁且扩展性强：

1. CSS样式 #

.loot-grid {
  display: grid;
  /* 自动填充列，每个图标最小宽度80px，超出自动换行 */
  grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
  /* 图标之间的间距 */
  gap: 8px;
  padding: 10px;
}

.Loot {
  width: 100%;
  height: auto;
  cursor: pointer;
  /* 加过渡动画，切换更流畅 */
  transition: opacity 0.2s ease;
  /* 初始透明度设为1 */
  opacity: 1;
}

2. HTML结构 #

<!-- 用一个父容器包裹所有图标 -->
<div class="loot-grid">
  <img src="item-icon-1.png" class="Loot" alt="物品1">
  <img src="item-icon-2.png" class="Loot" alt="物品2">
  <!-- 数百个图标直接按顺序添加即可 -->
</div>

优势 #

• 无需手动维护table的行/列结构，新增图标直接追加到容器里即可
• 自动适配不同屏幕宽度，响应式效果好
• 事件委托只需绑定一次父容器，性能更优（尤其适合数百个元素）

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