我有產(chǎn)品卡，每張卡都有一個玩家。預期是什么：單擊播放按鈕時，每個玩家都應該播放自己的曲目?，F(xiàn)在正在發(fā)生什么：當我單擊任何播放按鈕時，它僅播放第一首曲目。這是我的代碼：let isPlaying = false let playBtn = document.querySelectorAll('.playerButton'); for (var i = 0; i < player.length; i++) { if (playBtn != null) { playBtn[i].addEventListener('click', togglePlay); } } // Controls & Sounds Methods // ---------------------------------------------------------- function togglePlay() { let player = document.querySelectorAll('.player') if (player.paused === false) { player.pause(); isPlaying = false; document.querySelector(".fa-pause") .style.display = 'none'; document.querySelector(".fa-play") .style.display = 'block'; } else { player[0].play(); document.querySelector(".fa-play") .style.display = 'none'; document.querySelector(".fa-pause") .style.display = 'block'; isPlaying = true; } } {% for product in products %} <div class="card-trip"> <div class="player-section"> <img src="{{ product.image.url }}" /> <div class="audio-player"> <a class="playerButton"> <span> <i class="fas fa-play"></i> </span> <span> <i class="fas fa-pause"></i> </span> </a> <audio id="player" class="player"> <source src="https://api.coderrocketfuel.com/assets/pomodoro-times-up.mp3"> Your browser does not support the audio element. </audio> </div> </div>
1 回答
一只名叫tom的貓
TA貢獻1906條經(jīng)驗 獲得超3個贊
您應該通過為每個元素提供正確的索引來隔離它們。
Player 是一個數(shù)組，因此您必須使用索引訪問元素
let player = document.querySelectorAll('.player')
這應該有幫助：
let isPlaying = false
let playBtn = document.querySelectorAll('.playerButton');
for (let i = 0; i < player.length; i++) {
if (playBtn[i]) {
playBtn[i].addEventListener('click', ()=>togglePlay(i));
}
}
// Controls & Sounds Methods
// ----------------------------------------------------------
function togglePlay(i) {
let player = document.querySelectorAll('.player')
if (player[i].paused === false) {
player[i].pause();
isPlaying = false;
document.querySelector(".fa-pause")
.style.display = 'none';
document.querySelector(".fa-play")
.style.display = 'block';
} else {
player[i].play();
document.querySelector(".fa-play")
.style.display = 'none';
document.querySelector(".fa-pause")
.style.display = 'block';
isPlaying = true;
}
}
- 1 回答
- 0 關(guān)注
- 123 瀏覽
添加回答
舉報
0/150
提交
取消