如何使用HTML/CSS/JS/jQuery实现Bootstrap卡片点击后变灰效果？

完全可以仅通过HTML、CSS、原生JS或jQuery实现该效果，不需要后端额外支持，具体实现如下：

核心实现逻辑 #

• 监听卡片元素的点击事件
• 点击触发后为目标卡片添加Bootstrap自带的text-muted类，即可完成灰化效果
• 可选优化：将已点击的卡片ID存入localStorage，页面刷新后自动恢复灰化状态，匹配无限列表的常规使用需求

基础HTML结构 #

{% for obj in objects %}
<a href="/detail/id/" target="_blank">
  <div class="card" id="card{{ obj.id }}">
    <!-- 卡片内部内容 -->
  </div>
</a>
{% endfor %}

代码实现 #

原生JS版本 #

document.addEventListener('DOMContentLoaded', function() {
  // 读取本地存储的已点击卡片ID，初始化状态
  const clickedCards = JSON.parse(localStorage.getItem('clickedCards') || '[]')
  clickedCards.forEach(cardId => {
    const targetCard = document.getElementById(cardId)
    targetCard && targetCard.classList.add('text-muted')
  })

  // 绑定所有卡片的点击事件
  document.querySelectorAll('.card').forEach(card => {
    card.addEventListener('click', function() {
      // 给当前点击卡片加灰化类
      this.classList.add('text-muted')
      // 把卡片ID存入本地存储，刷新不丢失状态
      const currentId = this.getAttribute('id')
      if (!clickedCards.includes(currentId)) {
        clickedCards.push(currentId)
        localStorage.setItem('clickedCards', JSON.stringify(clickedCards))
      }
    })
  })
})

jQuery版本（项目已引入jQuery时使用） #

$(function() {
  // 读取本地存储的已点击卡片ID，初始化状态
  const clickedCards = JSON.parse(localStorage.getItem('clickedCards') || '[]')
  clickedCards.forEach(cardId => {
    $(`#${cardId}`).addClass('text-muted')
  })

  // 绑定所有卡片的点击事件
  $('.card').on('click', function() {
    // 给当前点击卡片加灰化类
    $(this).addClass('text-muted')
    // 把卡片ID存入本地存储，刷新不丢失状态
    const currentId = $(this).attr('id')
    if (!clickedCards.includes(currentId)) {
      clickedCards.push(currentId)
      localStorage.setItem('clickedCards', JSON.stringify(clickedCards))
    }
  })
})

自定义样式扩展（可选） #

如果默认text-muted的灰化效果不符合设计需求，可以自定义样式类替换：

/* 自定义灰化样式 */
.card-has-clicked {
  opacity: 0.5;
  filter: grayscale(100%);
  /* 可选：点击后禁止再次触发点击事件 */
  pointer-events: none;
}

使用时把上述代码中的text-muted替换为card-has-clicked即可。

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