What's the simplest way to assign unique sliders to each clicked element in this case?

小能豆

What's the simplest way to assign unique sliders to each clicked element in this case?

javascript

I currently have a table with a javascript function where when a table cell is clicked, the entire row will be removed and the clicked cell will be copied to the leftmost position with a slider opening up on the right. However, I only have a universal slider for all clicked elements but I want to make each table cell’s slider unique. What’s the best approach for that in this case?

document.addEventListener("DOMContentLoaded", function () {
  var table = document.getElementById("TrendGames");
  table.addEventListener("click", function (event) {
    var 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";

  // Hide/Show all cells
  for (var i = 0; i < cells.length; i++) {
    cells[i].style.display = display;
  }
  if (display) {
    // First click (third, fifth, ...)
    // Copy(!) the clicked cell in the leftmost position
    const newCell = clickedCell.cloneNode(true);
    newCell.style.display = "";
    newCell.colSpan = cells.length;
    row.insertBefore(newCell, row.firstChild);
    // Open the slider and display information
    openSlider(newCell);
  } else {
    // Remove the cell that was inserted on previous click
    clickedCell.remove();
    closeSlider(clickedCell);
  }
}

<table id="TrendGames">
  <tbody>
    <tr>
      <td id="cell1">
        Cell 1
        <img class="GameCover" src=".png" alt="cell1" />
      </td>
      <td id="cell2">
        Cell 2
        <img class="GameCover" src=".png" alt="cell2" />
      </td>
      <td id="cell31">
        Cell 3
        <img class="GameCover" src=".png" alt="cell3" />
      </td>
      <td id="cell4">
        Cell 4
        <img class="GameCover" src=".png" alt="cell4" />
      </td>
    </tr>
  </tbody>
</table>

阅读 82

2023-12-21

共1个答案

小能豆

If you want to make each table cell’s slider unique, you can generate a unique identifier for each slider and use it to distinguish between them. Here’s an example of how you can modify your code to achieve this:

document.addEventListener("DOMContentLoaded", function () {
  var table = document.getElementById("TrendGames");
  table.addEventListener("click", function (event) {
    var 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";

  // Hide/Show all cells
  for (var i = 0; i < cells.length; i++) {
    cells[i].style.display = display;
  }
  if (display) {
    // First click (third, fifth, ...)
    // Copy(!) the clicked cell in the leftmost position
    const newCell = clickedCell.cloneNode(true);
    newCell.style.display = "";
    newCell.colSpan = cells.length;

    // Generate a unique identifier for the slider
    const sliderId = `slider_${Date.now()}_${Math.random()}`;
    newCell.setAttribute("data-slider-id", sliderId);

    row.insertBefore(newCell, row.firstChild);

    // Open the slider and display information
    openSlider(newCell);
  } else {
    // Remove the cell that was inserted on the previous click
    clickedCell.remove();
    closeSlider(clickedCell);
  }
}

function openSlider(cell) {
  // Access the unique identifier for the slider
  const sliderId = cell.getAttribute("data-slider-id");
  console.log(`Opening slider with id: ${sliderId}`);
  // Your code to open the slider
}

function closeSlider(cell) {
  // Access the unique identifier for the slider
  const sliderId = cell.getAttribute("data-slider-id");
  console.log(`Closing slider with id: ${sliderId}`);
  // Your code to close the slider
}

This modification adds a data-slider-id attribute to each cloned cell, which contains a unique identifier. The openSlider and closeSlider functions then use this identifier to operate on the correct slider.

2023-12-21