각각 플레이어가있는 제품 카드가 있습니다.
예상되는 사항 :
각 플레이어는 재생 버튼을 클릭 할 때 자신의 트랙을 재생해야합니다.
지금 일어나고있는 일 :
재생 버튼 중 하나를 클릭하면 첫 번째 트랙 만 재생됩니다.
내 코드는 다음과 같습니다.
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>
<div class="card-trip-infos">
<div>
<h2>{{product.name}}</h2>
<p>{{product.description}}</p>
<button class="btn" type="button">buy now - ${{product.price}}</button>
<p>{{product.tag}}</p>
</div>
</div>
</div>
{% endfor %}올바른 색인을 제공하여 각 요소를 분리해야합니다.
플레이어는 배열이므로 인덱스를 사용하여 요소에 액세스해야합니다.
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;
}
}
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다