Question

我有每张都有播放器的产品卡。

期望的是：

每个播放器都应在单击播放按钮时播放自己的曲目。

现在正在发生什么：

当我单击任意一个播放按钮时，它只会播放第一首曲目。

这是我的代码：

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 %}

Answer 1

您应该通过为每个元素提供正确的索引来隔离它们。

player是一个数组，因此您必须使用索引来访问元素

select ts from table1 where cast(ts as timestamp) = '2020-03-10 22:54:08'

这应该有帮助：

let player = document.querySelectorAll('.player')

多个音频播放器不起作用-仅第一个（Javascript）

1 个答案: