如何将解析后的JSON匹配数据改为卡片式展示并支持操作筛选

1. 调整HTML结构 #

先在原有页面基础上新增卡片容器、切换按钮、操作按钮相关DOM结构，示例如下：

<!-- 匹配计数 -->
<div id="matchesCount">You have 0 matches.</div>
<!-- 浏览切换控件 -->
<div class="nav-btns">
  <button id="prevBtn">上一个</button>
  <span id="currentIndex">0/0</span>
  <button id="nextBtn">下一个</button>
</div>
<!-- 卡片容器 -->
<div id="matchesCardContainer"></div>

2. 新增基础样式（可根据设计需求调整） #

.card {
  border: 1px solid #eee;
  border-radius: 8px;
  padding: 16px;
  margin: 12px 0;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  display: none; /* 切换浏览模式下默认隐藏，仅显示当前选中卡片 */
}
.card.active {
  display: block;
}
.card .action-btns {
  margin-top: 12px;
  display: flex;
  gap: 8px;
}
.card.ok {
  border-color: #52c41a;
  background: #f6ffed;
}
.card.no {
  border-color: #ff4d4f;
  background: #fff2f0;
}
.nav-btns {
  margin: 12px 0;
  display: flex;
  gap: 8px;
  align-items: center;
}

如果需要所有卡片平铺展示，不需要切换浏览，删掉.card的display:none属性即可。

3. 修改JS逻辑 #

首先定义全局变量存储匹配结果和当前浏览索引：

// 全局变量，存储所有匹配结果和当前浏览位置
let allMatches = [];
let currentCardIndex = 0;

替换你原有筛选、渲染逻辑：

var dataParsed = JSON.parse(data);
// 注意：如果interests是输入框，建议把innerHTML改为value，输入框取值用value更准确
var interestsVar = document.getElementById("interests").value.trim();
var result = dataParsed.filter(x => x.interests === interestsVar);
var matchesCardContainer = document.getElementById("matchesCardContainer");

// 去重逻辑：判断当前结果是否已经存在于匹配列表中
const hasDuplicate = allMatches.some(item => JSON.stringify(item) === JSON.stringify(result[0]));
if (result.length > 0 && !hasDuplicate) {
  // 把新匹配项加入全局数组
  allMatches = [...allMatches, ...result];
  // 重新渲染所有卡片
  renderCards();
  // 更新匹配计数
  document.getElementById("matchesCount").innerHTML = `You have ${allMatches.length} matches.`;
  // 自动切换到最新匹配的卡片
  currentCardIndex = allMatches.length - 1;
  switchCard();
  count();
}

// 渲染所有卡片方法
function renderCards() {
  matchesCardContainer.innerHTML = '';
  allMatches.forEach((item, index) => {
    const card = document.createElement('div');
    card.className = `card ${index === currentCardIndex ? 'active' : ''}`;
    card.dataset.index = index;
    // 可根据你的JSON字段自定义展示内容，不需要全量序列化
    card.innerHTML = `
      <h4>匹配项 ${index + 1}</h4>
      <pre>${JSON.stringify(item, null, 2)}</pre>
      <div class="action-btns">
        <button class="ok-btn">OK</button>
        <button class="no-btn">NO</button>
      </div>
    `;
    matchesCardContainer.appendChild(card);
  });
  // 绑定OK/NO按钮事件
  bindActionEvents();
  // 更新索引展示
  updateIndexText();
}

// 绑定卡片操作按钮事件
function bindActionEvents() {
  document.querySelectorAll('.ok-btn').forEach(btn => {
    btn.addEventListener('click', (e) => {
      const card = e.target.closest('.card');
      // 添加OK状态标记
      card.classList.remove('no');
      card.classList.add('ok');
      // 可在此扩展额外逻辑：比如把标记结果存储到本地/上传到服务器
    });
  });
  document.querySelectorAll('.no-btn').forEach(btn => {
    btn.addEventListener('click', (e) => {
      const card = e.target.closest('.card');
      // 添加NO状态标记
      card.classList.remove('ok');
      card.classList.add('no');
      // 可在此扩展额外逻辑
    });
  });
}

// 切换卡片方法
function switchCard() {
  document.querySelectorAll('.card').forEach((card, index) => {
    card.classList.toggle('active', index === currentCardIndex);
  });
  updateIndexText();
}

// 更新当前索引显示文本
function updateIndexText() {
  document.getElementById('currentIndex').innerText = `${currentCardIndex + 1}/${allMatches.length}`;
}

// 绑定上下切换按钮事件
document.getElementById('prevBtn').addEventListener('click', () => {
  if (allMatches.length === 0) return;
  currentCardIndex = currentCardIndex > 0 ? currentCardIndex - 1 : allMatches.length - 1;
  switchCard();
});
document.getElementById('nextBtn').addEventListener('click', () => {
  if (allMatches.length === 0) return;
  currentCardIndex = currentCardIndex < allMatches.length - 1 ? currentCardIndex + 1 : 0;
  switchCard();
});

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