一个javascript函数上的多个按钮
foreach从数据库中获取歌曲每个音频都有暂停和播放按钮 所有歌曲的所有按钮仅适用于第一首歌曲。。。当我按下第二首或第三首歌曲的按钮时,第一次运行。。。有解决办法吗 blade.php一个javascript函数上的多个按钮,javascript,php,Javascript,Php,foreach从数据库中获取歌曲每个音频都有暂停和播放按钮 所有歌曲的所有按钮仅适用于第一首歌曲。。。当我按下第二首或第三首歌曲的按钮时,第一次运行。。。有解决办法吗 blade.php @foreach($songs as $song) <audio class="player" id="player" src="{{asset('audios/'.$song->song)}}" type="
@foreach($songs as $song)
<audio class="player" id="player" src="{{asset('audios/'.$song->song)}}" type="audio/ogg" >
</audio>
<div class="player-control">
<button id="{{$song->id}}" class="playerbutton play btn btn-outline-info"
onclick="playmusic(this)" ><i class="fas fa-play"></i></button>
<button id="pause" class="playerbutton pause btn btn-outline-info"
onclick="pausemusic(this)"><i class="fas fa-pause"></i></button>
</div>
@endforeach
使用
var player=document.getElementById(“player”)代码>仅选择一个音频元素。
如果向按钮和音频标签添加唯一的歌曲id,如下所示:
@foreach($songs as $song)
<audio class="player" id="player-{{$song->id}}" ... </audio>
<div class="player-control">
<button data-song-id="{{$song->id}}" ... onclick="playmusic(this)" >...</button>
<button data-song-id="{{$song->id}}" ... onclick="pausemusic(this)">...</button>
</div>
@endforeach
我遇到错误(无法读取未定义的属性“dataset”)Oouch。请对每个函数进行如下更改:onclick=“playmusic()”=>onclick=“playmusic(this)”和e.target.dataset.songId=>e.dataset.songIdyeah它可以工作,谢谢。但这是什么(数据歌曲id)?它是一个存储唯一歌曲id值的数据属性。使用此值,您可以通过iddocument.getElementById(“player-”+songId)
选择与此歌曲关联的正确音频播放器。
@foreach($songs as $song)
<audio class="player" id="player-{{$song->id}}" ... </audio>
<div class="player-control">
<button data-song-id="{{$song->id}}" ... onclick="playmusic(this)" >...</button>
<button data-song-id="{{$song->id}}" ... onclick="pausemusic(this)">...</button>
</div>
@endforeach
function playmusic(e)
{
var songId = e.dataset.songId,
player = document.getElementById("player-" + songId);
player.play();
}
function pausemusic(e)
{
var songId = e.dataset.songId,
player = document.getElementById("player-" + songId);
player.pause();
}