javascript - 我如何在 Blade 花括号中使用 javascript 变量

Question

我有一个视频播放器站点，我有一个“下一步”按钮，它应该停止视频，将 src 更改为指向下一个视频并使用 javascript 播放它，但我无法绕过使用 javascript 循环来更改 src。

这是我的 Blade 文件

@extends('layouts.app')
@section('content')
<section class="player">
  <center>
    <video id="myvideo" class="playing-video" src="{{url('songs/'.$songs[0]->filename)}}" controls autoplay onended="nextVideo()">
    </video>
    <br>
    <button id="next" style="background-color: transparent;border: none;color: white;" onclick="nextVideo()" type="button">
    <h2><i class="fas fa-chevron-right"></i>Next</h2></button>
  </center>
</section>

这是不工作的 javascript

var i = 0;
var myVideo = document.getElementById("myvideo");

function nextVideo() {
  i++;
  myVideo.setAttribute("src", "http://localhost/Laravel/anime/public/songs/" + {{ $songs[i] -> filename }});
  myVideo.load();
  myVideo.play();
}

我知道我不能直接在 Blade 花括号内使用 javascript 变量，但我没有主意!

Answer 1

将 Laravel 集合存储为按钮上的数据点:

<button id="next" data-songs="{{json_encode($songs)}}" ... etc />

然后在 nextVideo() JS 方法中拉出 JS 对象并在其上循环(所有 JS):

function nextVideo() {
    var songs = JSON.parse( //get the data from the #next button )
    //loop using the JS songs object instead of the blade {{}}
}