Question

我正在尝试为自动生成的列表中的音频创建一个简单的播放/暂停按钮。播放/暂停按钮仅适用于列表中的第一个元素。

<li>
    <span onclick="HandleAudio(this)">
    <audio id="background_music">
        <source src="/audio.mp3" type="audio/mpeg">
    </audio>
    <img style="vertical-align: middle; margin-left:11px; margin-right:5px; margin-top:-3px; cursor:pointer;" src="/play.png" alt="Play Music" id="playbutton"><span style="cursor:pointer;" id="playinfo">Play</span></span>
</li>

var mPlayer = document.getElementById("background_music"); 
var mPlayAction = document.getElementById("playbutton");
var mPlayInfo = document.getElementById("playinfo");
var isPlaying = false;
function playAudio() { 
    mPlayer.play(); 
    isPlaying = true;
    mPlayAction.src = "/pause.png";
    mPlayInfo.innerHTML = "Pause";
} 
function pauseAudio() { 
    mPlayer.pause();
    isPlaying = false;
    mPlayAction.src = "/play.png";
    mPlayInfo.innerHTML = "Play";
}
function HandleAudio(){
  if(isPlaying == true){
    //Playing already Pause it
    pauseAudio();
  }else{
    //Play the music
    playAudio();
  }
}

我希望当我单击“播放/暂停”按钮时，它应该会影响其中的元素，但只会影响列表中的第一个元素。任何人都可以用正确的结构来帮助我。

Answer 1

您实际上不应该具有多个具有相同id的元素。 id应该是唯一属性，getElementById将仅返回一个元素。

因为您的函数正在根据id查找要播放的元素，所以它们只会找到第一个。这是一个最小的示例：

document.getElementById('test')
  .onclick = () => {
    // this will only get one element, despite there being many with the id 'a'
    document.getElementById('a').style.color = 'white';
  }

div {
  padding: 20px;
  background-color: rgba(20, 20, 50);
}

span {
  color: rgba(250, 100, 150, 0.9);
}

<div>
  <span id="a">A</span><span id="a">B</span><span id="a">C</span>
  <button id="test">Test</button>
</div>

如果您使用类而不是id的类，则可以获取所有相关元素并对其进行全部处理：

[...document.querySelectorAll('button')]
.forEach(button => {
  button.onclick = (event) => {
    const clickedButton = event.target;
    [
      ...clickedButton
      .parentElement
      .querySelectorAll('.a')
    ]
    .forEach(element => element.style.color = 'white')
  }
})

div {
  padding: 20px;
  background-color: rgba(20, 20, 50);
}

span {
  color: rgba(250, 100, 150, 0.9);
}

<div>
  <span class="a">A</span><span class="a">B</span><span class="a">C</span>
  <button id="test">Test</button>
</div>

<div>
  <span class="a">A</span><span class="a">B</span><span class="a">C</span>
  <button id="test">Test</button>
</div>

播放/暂停按钮仅在第一个元素上起作用

1 个答案: