在下面的 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>
最佳答案
只需迭代表中的所有按钮即可。循环时,检查是否是我们单击的按钮,如果不是,我们可以相应地更改类。
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>
关于javascript - 在表中的所有行之间切换图标类,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/72171890/