JavaScript中按类指定元素 解决滑块关闭错误问题

我有一个两行的表格，想要用JavaScript实现以下功能：

• 点击表格单元格时，整行的所有元素隐藏
• 被点击的单元格克隆到该行最左侧，克隆单元格的右侧弹出一个滑块
  但现在滑块关闭功能有问题：当两行的滑块都打开时，关闭操作经常会误关其他行的滑块。我尝试给克隆元素和滑块加所属行的类，但不知道怎么通过类指定要关闭的对应滑块。

<table id='TrendGames'>
        <tbody>
            <tr>
                <td id="cell1" class='Row1'>
                <img class='GameCover' src='Fortnite Front Cover.png' alt="cell1" />
                </td>
                <td id="cell2">
                <img class='GameCover' src='LOL Front Cover.png' alt="cell2" />
                </td>
                <td id="cell3">
                <img class='GameCover' src='Minecraft Front Cover.png' alt="cell3" />
                </td>
                <td id="cell4">
                <img class='GameCover' src='Roblox Front Cover.png' alt="cell4" />
                </td>
            </tr>
            <tr>
                <td id="cell5" class='Row2'>
                <img class='GameCover' src='Call of Duty Front Cover.jpg' alt="cell5" />
                </td>
                <td id="cell6">
                <img class='GameCover' src='Valorant Front Cover.jpg' alt="cell6" />
                </td>
                <td id="cell7">
                <img class='GameCover' src='Counter Strike 2 Front Cover.jpeg' alt="cell7" />
                </td>
                <td id="cell8">
                <img class='GameCover' src='The Sim 4 Front Cover.webp' alt="cell8" />
                </td>
            </tr>
      </tbody>
</table>

document.addEventListener('DOMContentLoaded', function() {
  let table = document.getElementById('TrendGames');
  table.addEventListener('click', function(event) {
    let clickedCell = event.target.closest('td');
    if (clickedCell) {
      handleCellClick(clickedCell);
    }
  });
});

function handleCellClick(clickedCell) {
  const row = clickedCell.parentElement;
  const cells = row.children;
  const display = cells[cells.length - 1].style.display ? '' : 'none';

  for (let i = 0; i < cells.length; i++) {
    cells[i].style.display = display;
  }
  if (display) { 
    const newCell = clickedCell.cloneNode(true);
    newCell.style.display = '';
    newCell.colSpan = cells.length;
    row.insertBefore(newCell, row.firstChild);
    openSlider(newCell);
  } else {
    clickedCell.remove();
    closeSlider(clickedCell);
  }
}
    
function openSlider(cell) {
  let WhichSlider = cell.id; // Using cell.id instead of clickedCell.ID
  switch(WhichSlider) {
    case "cell1":
        slider1(cell)
        break;
    case "cell2":
        slider2(cell)
        break;
    case "cell3":
        slider3(cell)
        break;
    case "cell4":
        slider4(cell)
        break;
    case "cell5":
        slider5(cell)
        break;
    case "cell6":
        slider6(cell)
        break;
    case "cell7":
        slider7(cell)
        break;
    case "cell8":
        slider8(cell)
        break;
  }
}

// down here are the functions of the open slider (slider1-slider8)

function closeSlider(cell) {
let slider = document.querySelector('.slider');
if (slider) {
    slider.remove();
}
}

问题根源是closeSlider函数里用document.querySelector('.slider')只会选中页面中第一个带.slider类的元素，导致误关其他行滑块。以下是几种可行的修复方式：

方法1：给滑块绑定关联的单元格ID（推荐） #

在创建滑块的slider1到slider8函数中，给滑块添加data-cell-id属性关联对应单元格ID：

// 示例：修改slider1函数
function slider1(cell) {
  const slider = document.createElement('div');
  slider.className = 'slider';
  slider.dataset.cellId = cell.id; // 绑定单元格ID
  // ... 其他滑块创建逻辑
  document.body.appendChild(slider);
}

然后修改closeSlider函数，根据传入单元格的ID精准查找对应滑块：

function closeSlider(cell) {
  let slider = document.querySelector(`.slider[data-cell-id="${cell.id}"]`);
  if (slider) {
      slider.remove();
  }
}

方法2：通过DOM层级关系查找 #

如果滑块是插入在克隆单元格的相邻位置（比如同一行内），可以通过行元素定位对应滑块：

function closeSlider(cell) {
  const row = cell.parentElement;
  // 假设滑块是当前行的兄弟元素或行内元素
  let slider = row.querySelector('.slider') || row.nextElementSibling;
  if (slider) {
      slider.remove();
  }
}

方法3：给滑块添加行标识类 #

在openSlider中获取单元格所属行的类，给滑块添加对应类：

function openSlider(cell) {
  const rowClass = cell.closest('tr').querySelector('td').className;
  let WhichSlider = cell.id;
  switch(WhichSlider) {
    case "cell1":
        slider1(cell, rowClass)
        break;
    // 其他case同理传递rowClass
  }
}

// 示例：修改slider1函数
function slider1(cell, rowClass) {
  const slider = document.createElement('div');
  slider.className = `slider ${rowClass}`; // 添加行标识类
  // ... 其他逻辑
}

修改closeSlider函数，通过行类精准查找滑块：

function closeSlider(cell) {
  const rowClass = cell.closest('tr').querySelector('td').className;
  let slider = document.querySelector(`.slider.${rowClass}`);
  if (slider) {
      slider.remove();
  }
}

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