javascript - 切换表中所有行的图标类

Question

在下面的 javascript 代码中有两个图标。 fa-circle-pause 和 fa-circle-play。

当用户单击表格中任何一行中的播放图标时，它会更新为 fa-circle-pause 图标。我已经能够为单行做到这一点。

但我无法使用图标 fa-circle-play 更新表格中的其余行。

我怎样才能只使用 javascript 来做到这一点？

const data = [{
  Name: 'Chapter 1',
  TrackId: 1
}, {
  Name: 'Chapter 2',
  TrackId: '2',
}, , {
  Name: 'Chapter 3',
  TrackId: '3',
}, , {
  Name: 'Chapter 4',
  TrackId: '4',
}]; // any json data or array of objects
const tableData = data.map(function(value) {
  return (
    `<tr>
           <th scope="row">
            <span data-track-id='${value.TrackId}' class="play-button btn">
                <i class="fa-solid fa-circle-play"></i>
            </span>
          </th>
          <td>${value.Name}</td>
     </tr>`
  );
}).join('');
const tabelBody = document.querySelector("#tableBody");
tableBody.innerHTML = tableData;

const pauseIconClassName = 'fa-circle-pause'
const playIconClassName = 'fa-circle-play'

const btns = document.querySelectorAll('.play-button')

function onChange(event) {
  // get the button elememt from the event
  const buttonElement = event.currentTarget.querySelector('i');

  const isPlayButton = buttonElement.classList.contains(playIconClassName)

  if (isPlayButton) {
    buttonElement.classList.remove(playIconClassName)
    buttonElement.classList.add(pauseIconClassName)
  } else {
    buttonElement.classList.remove(pauseIconClassName)
    buttonElement.classList.add(playIconClassName)
  }
}

btns.forEach(btn => {
  btn.addEventListener('click', onChange)
})

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" rel="stylesheet" />

<table border="2">
  <thead class="thead-dark">
    <tr>
      <th scope="col">#</th>
      <th scope="col">Track</th>
    </tr>
  </thead>
  <tbody id="tableBody">

  </tbody>
</table>

Answer 1

简单地遍历表格的所有按钮。循环时，检查它是否是我们点击的按钮，如果不是我们可以相应地更改类。

const data = [{
  Name: 'Chapter 1',
  TrackId: 1
}, {
  Name: 'Chapter 2',
  TrackId: '2',
}, , {
  Name: 'Chapter 3',
  TrackId: '3',
}, , {
  Name: 'Chapter 4',
  TrackId: '4',
}]; // any json data or array of objects
const tableData = data.map(function(value) {
  return (
    `<tr>
           <th scope="row">
            <span data-track-id='${value.TrackId}' class="play-button btn">
                <i class="fa-solid fa-circle-play"></i>
            </span>
          </th>
          <td>${value.Name}</td>
     </tr>`
  );
}).join('');
const tabelBody = document.querySelector("#tableBody");
tableBody.innerHTML = tableData;

const pauseIconClassName = 'fa-circle-pause'
const playIconClassName = 'fa-circle-play'

const btns = document.querySelectorAll('.play-button')

function onChange(event) {
  // get the button element from the event
  const buttonElement = event.currentTarget.querySelector('i');

  const isPlayButton = buttonElement.classList.contains(playIconClassName)

  if (isPlayButton) {
    buttonElement.classList.remove(playIconClassName)
    buttonElement.classList.add(pauseIconClassName)
  } else {
    buttonElement.classList.remove(pauseIconClassName)
    buttonElement.classList.add(playIconClassName)
  }
  
  // Find all the buttons
  let buttons = tabelBody.querySelectorAll('i.fa-solid');
  
  // Loop through all buttons
  for(let button of buttons)
  {
    if(button !== buttonElement) // Is this the button we clicked on?
    {
      // If not, reset back to play
      button.classList.remove(pauseIconClassName)
      button.classList.add(playIconClassName)
    }
  }
}

btns.forEach(btn => {
  btn.addEventListener('click', onChange)
})

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" rel="stylesheet" />

<table border="2">
  <thead class="thead-dark">
    <tr>
      <th scope="col">#</th>
      <th scope="col">Track</th>
    </tr>
  </thead>
  <tbody id="tableBody">

  </tbody>
</table>